.ct-section {
width:100%;
background-size:cover;
background-repeat:repeat;
}
.ct-section>.ct-section-inner-wrap {
display:flex;
flex-direction:column;
align-items:flex-start;
}
.ct-div-block {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.ct-new-columns {
display:flex;
width:100%;
flex-direction:row;
align-items:stretch;
justify-content:center;
flex-wrap:wrap;
}
.ct-link-text {
display:inline-block;
}
.ct-link {
display:flex;
flex-wrap:wrap;
text-align:center;
text-decoration:none;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-link-button {
display:inline-block;
text-align:center;
text-decoration:none;
}
.ct-link-button {
background-color: #1e73be;
border: 1px solid #1e73be;
color: #ffffff;
padding: 10px 16px;
}
.ct-image {
max-width:100%;
}
.ct-fancy-icon>svg {
width:55px;height:55px;}
.ct-inner-content {
width:100%;
}
.ct-slide {
display:flex;
flex-wrap:wrap;
text-align:center;
flex-direction:column;
align-items:center;
justify-content:center;
}
.ct-nestable-shortcode {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-comments {
width:100%;
text-align:left;
}
.oxy-comment-form {
width:100%;
}
.oxy-login-form {
width:100%;
}
.oxy-search-form {
width:100%;
}
.oxy-tabs-contents {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-tab-content {
display:flex;
width:100%;
flex-wrap:nowrap;
flex-direction:column;
align-items:flex-start;
}
.oxy-testimonial {
width:100%;
}
.oxy-icon-box {
width:100%;
}
.oxy-pricing-box {
width:100%;
}
.oxy-posts-grid {
width:100%;
}
.oxy-gallery {
width:100%;
}
.ct-slider {
width:100%;
}
.oxy-tabs {
display:flex;
flex-wrap:nowrap;
flex-direction:row;
align-items:stretch;
}
.ct-modal {
flex-direction:column;
align-items:flex-start;
}
.ct-span {
display:inline-block;
text-decoration:inherit;
}
.ct-widget {
width:100%;
}
.oxy-dynamic-list {
width:100%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
			.ct-div-block,
			.oxy-post-content,
			.ct-text-block,
			.ct-headline,
			.oxy-rich-text,
			.ct-link-text { max-width: 100%; }
			img { flex-shrink: 0; }
			body * { min-height: 1px; }
		}            .oxy-testimonial {
                flex-direction: row;
                align-items: center;
            }
                        .oxy-testimonial .oxy-testimonial-photo-wrap {
                order: 1;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo {
                width: 125px;                height: 125px;                margin-right: 20px;
            }
            
                        .oxy-testimonial .oxy-testimonial-photo-wrap, 
            .oxy-testimonial .oxy-testimonial-author-wrap, 
            .oxy-testimonial .oxy-testimonial-content-wrap {
                align-items: flex-start;                text-align: left;            }
            
                                                            .oxy-testimonial .oxy-testimonial-text {
                margin-bottom:8px;font-size: 21px;
line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
                                    .oxy-testimonial .oxy-testimonial-author {
                font-size: 18px;
-webkit-font-smoothing: subpixel-antialiased;
            }
                            

                                                .oxy-testimonial .oxy-testimonial-author-info {
                font-size: 12px;
-webkit-font-smoothing: subpixel-antialiased;
            }
            
             
            
                        .oxy-icon-box {
                text-align: left;                flex-direction: column;            }
            
                        .oxy-icon-box .oxy-icon-box-icon {
                margin-bottom: 12px;
                align-self: flex-start;            }
            
                                                                        .oxy-icon-box .oxy-icon-box-heading {
                font-size: 21px;
margin-bottom: 12px;            }
            
                                                                                    .oxy-icon-box .oxy-icon-box-text {
                font-size: 16px;
margin-bottom: 12px;align-self: flex-start;            }
            
                        .oxy-icon-box .oxy-icon-box-link {
                margin-top: 20px;                            }
            
            
            /* GLOBALS */

                                                            .oxy-pricing-box .oxy-pricing-box-section {
                padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
text-align: center;            }
                        
                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                justify-content: center;            }
            
            /* IMAGE */
                                                                                    .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-graphic {
                justify-content: center;            }
            
            /* TITLE */
                                                            
                                    .oxy-pricing-box .oxy-pricing-box-title-title {
                font-size: 48px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-title-subtitle {
                font-size: 24px;
            }
            

            /* PRICE */
                                                .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-price {
                                                flex-direction: row;                                            }
            
                                    .oxy-pricing-box .oxy-pricing-box-currency {
                font-size: 28px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-main {
                font-size: 80px;
line-height: 0.7;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-amount-decimal {
                font-size: 13px;
            }
                        
                                    .oxy-pricing-box .oxy-pricing-box-term {
                font-size: 16px;
            }
            
                                    .oxy-pricing-box .oxy-pricing-box-sale-price {
                font-size: 12px;
color: rgba(0,0,0,0.5);
                margin-bottom: 20px;            }
            
            /* CONTENT */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-content {
                font-size: 16px;
color: rgba(0,0,0,0.5);
            }
            
            /* CTA */

                                                                        .oxy-pricing-box .oxy-pricing-box-section.oxy-pricing-box-cta {
                justify-content: center;            }
            
        
                                .oxy-progress-bar .oxy-progress-bar-background {
            background-color: #000000;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);            animation: none 0s paused;        }
                
                .oxy-progress-bar .oxy-progress-bar-progress-wrap {
            width: 85%;        }
        
                                                        .oxy-progress-bar .oxy-progress-bar-progress {
            background-color: #66aaff;padding: 40px;animation: none 0s paused, none 0s paused;            background-image: linear-gradient(-45deg,rgba(255,255,255,.12) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.12) 75%,transparent 75%,transparent);        
        }
                
                        .oxy-progress-bar .oxy-progress-bar-overlay-text {
            font-size: 30px;
font-weight: 900;
-webkit-font-smoothing: subpixel-antialiased;
        }
        
                        .oxy-progress-bar .oxy-progress-bar-overlay-percent {
            font-size: 12px;
        }
        
        .ct-slider .unslider-nav ol li {border-color: #ffffff; }.ct-slider .unslider-nav ol li.unslider-active {background-color: #ffffff; }.ct-slider .ct-slide {
				padding: 0px;			}
		
                        .oxy-superbox .oxy-superbox-secondary, 
            .oxy-superbox .oxy-superbox-primary {
                transition-duration: 0.5s;            }
            
            
            
            
            
        
        
        
        
            .oxy-shape-divider {
                width: 0px;
                height: 0px;
                
            }
            
            .oxy_shape_divider svg {
                width: 100%;
            }
            .oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .sub-menu{
box-shadow:px px px px ;}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-show-dropdown .oxy-pro-menu-list .menu-item-has-children > a div{
margin-left:0px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
width:30px;
height:30px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon{
padding-top:15px;
padding-right:15px;
padding-bottom:15px;
padding-left:15px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-open-icon, .oxy-pro-menu .oxy-pro-menu-mobile-open-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon{
top:20px;
left:20px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
width:24px;
height:24px;
}

.oxy-pro-menu .oxy-pro-menu-mobile-close-icon, .oxy-pro-menu .oxy-pro-menu-mobile-close-icon svg{
transition-duration:0.4s;
}

.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container{
background-color:#ffffff;
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container, .oxy-pro-menu .oxy-pro-menu-open-container{
background-image:url();
}

.oxy-pro-menu .oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item-has-children > a svg, .oxy-pro-menu .oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item-has-children > a svg{
font-size:24px;
}

.oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-open-container .menu-item-has-children ul, .oxy-pro-menu .oxy-pro-menu-dropdown-links-toggle.oxy-pro-menu-off-canvas-container .menu-item-has-children ul{
background-color:rgba(0,0,0,0.2);
border-top-style:solid;
}

.oxy-pro-menu .oxy-pro-menu-container:not(.oxy-pro-menu-open-container):not(.oxy-pro-menu-off-canvas-container) .oxy-pro-menu-list{
                    flex-direction: row;
               }
.oxy-pro-menu .oxy-pro-menu-container .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .menu-item, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .menu-item{
                    align-items: flex-start;
                }

            .oxy-pro-menu .oxy-pro-menu-off-canvas-container{
                    top: 0;
                    bottom: 0;
                    right: auto;
                    left: 0;
               }
.oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-open-container .oxy-pro-menu-list .menu-item a, .oxy-pro-menu .oxy-pro-menu-container.oxy-pro-menu-off-canvas-container .oxy-pro-menu-list .menu-item a{
                    text-align: left;
                    justify-content: flex-start;
                }

            .oxy-site-navigation {
--oxynav-brand-color:#4831B0;
--oxynav-neutral-color:#FFFFFF;
--oxynav-activehover-color:#EFEDF4;
--oxynav-background-color:#4831B0;
--oxynav-border-radius:0px;
--oxynav-other-spacing:8px;
--oxynav-transition-duration:0.3s;
--oxynav-transition-timing-function:cubic-bezier(.84,.05,.31,.93);
}

.oxy-site-navigation .oxy-site-navigation__mobile-close-wrapper{
text-align:left;
}

.oxy-site-navigation > ul{ left: 0; }
.oxy-site-navigation {
                        --oxynav-animation-name: none; 
                    }

                .oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1){ 
                    background-color: var(--oxynav-brand-color);
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                    border: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2){ 
                    background: transparent;
                    border: 1px solid currentColor;
                    transition: var(--oxynav-transition-duration);
                    margin-left: var(--oxynav-other-spacing);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2):not(:hover) > img{
                    filter: invert(0) !important;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover{
                    background-color: var(--oxynav-activehover-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a{
                    color: var(--oxynav-neutral-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a{
                    color: var(--oxynav-brand-color);
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(1) > a::after{
                    color: var(--oxynav-neutral-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:nth-last-child(2) > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true']:hover > a::after{
                    color: var(--oxynav-brand-color);   
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }
.oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > button, .oxy-site-navigation > ul:not(.open) > li[data-cta='true'] > ul{
                    display: none;
                }

                .ct-section-inner-wrap, .oxy-header-container{
  max-width: 1120px;
}
body {font-family: 'Open Sans';}body {line-height: 1.6;font-size: 16px;font-weight: 400;color: #404040;}.oxy-nav-menu-hamburger-line {background-color: #404040;}h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans 3';font-size: 36px;font-weight: 700;}h2, h3, h4, h5, h6{font-size: 30px;}h3, h4, h5, h6{font-size: 24px;}h4, h5, h6{font-size: 20px;}h5, h6{font-size: 18px;}h6{font-size: 16px;}a {color: #0074db;text-decoration: none;}a:hover {text-decoration: none;}.ct-link-text {text-decoration: ;}.ct-link {text-decoration: ;}.ct-link-button {border-radius: 3px;}.ct-section-inner-wrap {
padding-top: 75px;
padding-right: 20px;
padding-bottom: 75px;
padding-left: 20px;
}.ct-new-columns > .ct-div-block {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}.oxy-header-container {
padding-right: 20px;
padding-left: 20px;
}@media (max-width: 992px) {
				.ct-columns-inner-wrap {
					display: block !important;
				}
				.ct-columns-inner-wrap:after {
					display: table;
					clear: both;
					content: "";
				}
				.ct-column {
					width: 100% !important;
					margin: 0 !important;
				}
				.ct-columns-inner-wrap {
					margin: 0 !important;
				}
			}
/*==================================================
SERVICE KULKAS & MESIN CUCI
Landing Page Premium
Author : ChatGPT
Version : 1.0
==================================================*/


/*=========================================
GOOGLE FONT
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800&display=swap');


/*=========================================
ROOT
=========================================*/

:root{

    --primary:#0F6FFF;
    --primary-dark:#0A56C5;

    --secondary:#00C98D;
    --secondary-dark:#00A777;

    --accent:#FF9F1C;

    --dark:#081420;
    --dark-light:#132338;

    --white:#ffffff;

    --light:#F7FAFC;
    --gray:#64748B;
    --border:#E5E7EB;

    --success:#22C55E;
    --danger:#EF4444;

    --radius-xs:8px;
    --radius-sm:12px;
    --radius:18px;
    --radius-lg:24px;
    --radius-xl:32px;

    --shadow-sm:
    0 5px 15px rgba(0,0,0,.06);

    --shadow:
    0 15px 40px rgba(15,23,42,.10);

    --shadow-lg:
    0 25px 70px rgba(15,23,42,.18);

    --transition:.35s ease;

}


/*=========================================
RESET
=========================================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}

body{

font-family:'Inter',sans-serif;

font-size:16px;

line-height:1.8;

background:var(--white);

color:var(--gray);

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}


/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--primary),
var(--secondary)
);

border-radius:30px;

}


/*=========================================
TYPOGRAPHY
=========================================*/

h1,
h2,
h3,
h4,
h5,
h6{

font-family:'Poppins',sans-serif;

font-weight:700;

color:var(--dark);

line-height:1.25;

margin-bottom:18px;

}

h1{

font-size:64px;

font-weight:800;

}

h2{

font-size:46px;

}

h3{

font-size:28px;

}

p{

margin-bottom:18px;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}

ul{

padding:0;

margin:0;

list-style:none;

}


/*=========================================
SECTION
=========================================*/

section{

position:relative;

padding:110px 0;

}

.container{

max-width:1240px;

}


/*=========================================
TEXT
=========================================*/

.text-primary{

color:var(--primary)!important;

}

.text-secondary{

color:var(--secondary)!important;

}

.text-dark{

color:var(--dark)!important;

}

.text-gray{

color:var(--gray)!important;

}


/*=========================================
BACKGROUND
=========================================*/

.bg-light{

background:var(--light)!important;

}

.bg-primary-gradient{

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:#fff;

}


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

.btn-primary-custom{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:18px 34px;

border:none;

border-radius:60px;

background:

linear-gradient(
135deg,
var(--secondary),
#12D6A0
);

color:#fff;

font-weight:700;

font-size:16px;

box-shadow:

0 18px 35px rgba(0,201,141,.30);

transition:var(--transition);

}

.btn-primary-custom:hover{

transform:translateY(-6px);

color:#fff;

box-shadow:

0 30px 50px rgba(0,201,141,.40);

}

.btn-outline-custom{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:18px 34px;

border-radius:60px;

border:2px solid #1270ff;

color:#1270ff;

font-weight:700;

transition:.3s;

}

.btn-outline-custom:hover{

background:#fff;

color:var(--primary);

}


/*=========================================
SECTION TITLE
=========================================*/

.section-title{

max-width:760px;

margin:auto;

text-align:center;

margin-bottom:70px;

}

.section-title span{

display:inline-block;

padding:10px 22px;

border-radius:40px;

background:#E9F8F4;

color:var(--secondary);

font-weight:700;

margin-bottom:20px;

font-size:15px;

letter-spacing:.5px;

text-transform:uppercase;

}

.section-title h2{

margin-bottom:20px;

}

.section-title p{

font-size:18px;

}


/*=========================================
CARD
=========================================*/

.card-style{

background:#fff;

border-radius:24px;

padding:35px;

box-shadow:var(--shadow);

transition:var(--transition);

border:1px solid rgba(0,0,0,.03);

}

.card-style:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-lg);

}


/*=========================================
PRELOADER
=========================================*/

#preloader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

z-index:999999;

}

.loader-circle{

width:80px;

height:80px;

border-radius:50%;

border:6px solid #E5E7EB;

border-top:6px solid var(--primary);

animation:spin 1s linear infinite;

}

#preloader h2{

margin-top:25px;

font-size:20px;

font-weight:700;

color:var(--primary);

}


/*=========================================
PROGRESS BAR
=========================================*/

#progressBar{

position:fixed;

top:0;

left:0;

width:0;

height:4px;

background:

linear-gradient(
90deg,
var(--secondary),
var(--primary)
);

z-index:999999;

}

/*==================================================
HEADER
==================================================*/

#header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    transition:.35s ease;

    padding:18px 0;

}

#header.scrolled{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    padding:12px 0;

}

.navbar{

    padding:0;

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--dark);

    font-size:18px;

    font-weight:800;

    font-family:'Poppins',sans-serif;

}

.logo img{

    width:45px;

}

.logo span{

    color:var(--dark);
    font-size:15px;

}

.navbar-nav{

    align-items:center;

    gap:10px;

}

.navbar-nav li{

    list-style:none;

}

.navbar-nav a{

    color:var(--dark);

    font-weight:600;

    padding:12px 18px;

    position:relative;

}

.navbar-nav a::after{

    content:"";

    position:absolute;

    left:18px;

    bottom:4px;

    width:0;

    height:3px;

    border-radius:10px;

    background:var(--secondary);

    transition:.35s;

}

.navbar-nav a:hover{

    color:var(--primary);

}

.navbar-nav a:hover::after{

    width:40px;

}

.btn-header{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff !important;

    border-radius:60px;

    padding:14px 26px !important;

    box-shadow:0 15px 35px rgba(15,111,255,.25);

}

.btn-header::after{

    display:none;

}

.btn-header:hover{

    transform:translateY(-3px);

}


/*==================================================
HERO
==================================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    position:relative;

    padding-top:150px;

    background:
    linear-gradient(
    135deg,
    #f8fbff 0%,
    #eef8ff 45%,
    #f5fcfa 100%
    );

}

/* background blur */

.hero::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    background:#0F6FFF;

    opacity:.08;

    border-radius:50%;

    filter:blur(80px);

    top:-120px;

    right:-100px;

}

.hero::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:#00C98D;

    opacity:.08;

    border-radius:50%;

    filter:blur(90px);

    left:-120px;

    bottom:-120px;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(circle at 15% 20%,rgba(255,255,255,.9),transparent 35%),

    radial-gradient(circle at 90% 20%,rgba(255,255,255,.7),transparent 30%);

}

/*==================================================
HERO CONTENT
==================================================*/

.hero-content{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#EAFBF5;

    color:var(--secondary);

    font-weight:700;

    border-radius:50px;

    padding:12px 24px;

    margin-bottom:30px;

    box-shadow:0 8px 20px rgba(0,201,141,.12);

}

.hero-content h1{

    font-size:68px;

    line-height:1.08;

    margin-bottom:30px;

}

.hero-content h1 span{

    color:var(--primary);

}

.hero-desc{

    font-size:20px;

    color:var(--gray);

    max-width:620px;

    margin-bottom:35px;

}

.hero-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

    margin-bottom:40px;

}

.hero-list li{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:var(--dark);

}

.hero-list i{

    color:var(--secondary);

    font-size:18px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/*==================================================
HERO IMAGE
==================================================*/

.hero-image{

    position:relative;

    z-index:3;

    text-align:center;

}

.hero-image img{

    width:92%;

    margin:auto;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);

    animation:floatHero 4s ease-in-out infinite;

}

/*==================================================
FLOATING CARD
==================================================*/

.hero-card{

    position:absolute;

    top:12%;

    left:-30px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    padding:24px;

    border-radius:22px;

    box-shadow:0 20px 40px rgba(0,0,0,.12);

    width:220px;

}

.hero-card h3{

    color:#FFC107;

    margin-bottom:5px;

}

.hero-card strong{

    display:block;

    font-size:34px;

    color:var(--primary);

}

.hero-card small{

    color:var(--gray);

}

.hero-promo{

    position:absolute;

    right:10px;

    bottom:40px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    padding:26px;

    border-radius:22px;

    box-shadow:0 25px 50px rgba(15,111,255,.28);

    text-align:center;

}

.hero-promo h4{

    color:#fff;

    margin-bottom:12px;

}

.hero-promo strong{

    display:block;

    font-size:38px;

}

/*==================================================
FLOAT BUTTON
==================================================*/

.float-wa,
.float-call{

    position:fixed;

    right:24px;

    width:62px;

    height:62px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

    z-index:999;

    transition:.3s;

    box-shadow:0 18px 35px rgba(0,0,0,.18);

}

.float-wa{

    bottom:24px;

    background:#25D366;

}

.float-call{

    bottom:100px;

    background:var(--primary);

}

.float-wa:hover,
.float-call:hover{

    transform:scale(1.08) translateY(-5px);

    color:#fff;

}

/*==================================================
SCROLL INDICATOR
==================================================*/

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-indicator a{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    box-shadow:0 15px 35px rgba(0,0,0,.10);

    animation:bounce 2s infinite;

}

/*==================================================
TRUST BAR
==================================================*/

.trust-bar{

    margin-top:-70px;

    position:relative;

    z-index:20;

}

.trust-item{

    background:#fff;

    border-radius:26px;

    padding:40px 30px;

    text-align:center;

    transition:.35s;

    box-shadow:0 20px 45px rgba(15,23,42,.08);

    height:100%;

    border:1px solid rgba(15,111,255,.05);

    overflow:hidden;

    position:relative;

}

.trust-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    transform:scaleX(0);

    transition:.35s;

}

.trust-item:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(15,23,42,.15);

}

.trust-item:hover::before{

    transform:scaleX(1);

}

.trust-item i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    font-size:30px;

    margin-bottom:25px;

}

.trust-item h4{

    margin-bottom:15px;

}

.trust-item p{

    margin:0;

}

/*==================================================
SERVICE CARD
==================================================*/

.service-card{

    background:#fff;

    border-radius:28px;

    padding:38px 32px;

    height:100%;

    position:relative;

    overflow:hidden;

    transition:.35s;

    border:1px solid #edf2f7;

    box-shadow:0 18px 45px rgba(15,23,42,.06);

}

.service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    opacity:0;

    transition:.35s;

}

.service-card>*{

    position:relative;

    z-index:2;

}

.service-card:hover{

    transform:translateY(-14px);

}

.service-card:hover::before{

    opacity:1;

}

.service-card:hover h3,

.service-card:hover p,

.service-card:hover a,

.service-card:hover i{

    color:#fff;

}

.service-icon{

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:#eef6ff;

    color:var(--primary);

    font-size:34px;

    margin-bottom:28px;

    transition:.35s;

}

.service-card:hover .service-icon{

    background:rgba(255,255,255,.18);

}

.read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--primary);

    margin-top:15px;

}

/*==================================================
COUNTER
==================================================*/

.counter-section{

    background:linear-gradient(135deg,var(--primary),#1b84ff);

    color:#fff;

}

.counter-box{

    text-align:center;

    padding:35px 15px;

}

.counter-box h2{

    font-size:56px;

    color:#fff;

    font-weight:800;

    margin-bottom:8px;

}

.counter-box p{

    color:rgba(255,255,255,.85);

    margin:0;

    font-size:17px;

}

/*==================================================
FEATURE CARD
==================================================*/

.feature-card{

    background:#fff;

    border-radius:30px;

    padding:45px 35px;

    height:100%;

    position:relative;

    overflow:hidden;

    transition:.35s;

    border:1px solid #eef2f6;

    box-shadow:0 18px 45px rgba(15,23,42,.07);

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(15,23,42,.14);

}

.feature-number{

    position:absolute;

    right:30px;

    top:25px;

    font-size:52px;

    font-weight:800;

    color:rgba(15,111,255,.08);

    font-family:'Poppins',sans-serif;

}

.feature-icon{

    width:76px;

    height:76px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

}

.feature-card h3{

    margin-bottom:18px;

}

.feature-card p{

    margin-bottom:0;

}

/*==================================================
BRAND SECTION
==================================================*/

.brand-section{

    background:#F8FBFF;

    position:relative;

}

.brand-section::before{

    content:"";

    width:350px;

    height:350px;

    background:rgba(15,111,255,.05);

    border-radius:50%;

    filter:blur(80px);

    top:-120px;

    right:-120px;

}

.brandSwiper{

    padding:20px 0;

}

.brandSwiper .swiper-slide{

    display:flex;

    justify-content:center;

    align-items:center;

    height:120px;

}

.brandSwiper img{

    max-width:150px;

    opacity:.55;

    filter:grayscale(100%);

    transition:.35s;

}

.brandSwiper img:hover{

    opacity:1;

    filter:none;

    transform:scale(1.08);

}

/*==================================================
CTA BANNER
==================================================*/

.cta-banner{

    padding:80px 0;

}

.cta-banner .container{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border-radius:36px;

    padding:60px;

    color:#fff;

    overflow:hidden;

    position:relative;

}

.cta-banner .container::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-60px;

    top:-80px;

}

.cta-banner h2{

    color:#fff;

    margin-bottom:15px;

}

.cta-banner p{

    color:rgba(255,255,255,.90);

    margin-bottom:0;

}

/*==================================================
PROCESS
==================================================*/

.process-card{

    background:#fff;

    border-radius:28px;

    padding:45px 30px;

    text-align:center;

    position:relative;

    overflow:hidden;

    transition:.35s;

    border:1px solid #edf2f7;

    box-shadow:0 18px 45px rgba(15,23,42,.07);

    height:100%;

}

.process-card:hover{

    transform:translateY(-12px);

}

.process-number{

    position:absolute;

    top:18px;

    right:25px;

    font-size:52px;

    font-weight:800;

    color:rgba(15,111,255,.08);

}

.process-icon{

    width:85px;

    height:85px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:25px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:34px;

}

/*==================================================
PROMO
==================================================*/

.promo-section{

    background:linear-gradient(
        180deg,
        #ffffff,
        #F5FAFF
    );

}

.promo-box{

    border-radius:35px;

    padding:70px;

    background:#fff;

    box-shadow:0 30px 70px rgba(15,23,42,.10);

    position:relative;

    overflow:hidden;

}

.promo-box .bg {
    position: absolute;

    bottom: 0px;

    right: -60px;

    width: 605px;

    height: auto;
}

.promo-box .btn-primary-custom {
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12);
    animation: floatHero 4s ease-in-out infinite;
}

.promo-box::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(15,111,255,.05);

    bottom:-140px;

    right:-100px;

}

.promo-label{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:#FFF4D8;

    color:#D97706;

    font-weight:700;

    margin-bottom:20px;

}

.promo-list{

    margin-bottom:25px;

}

.promo-list li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    color:var(--dark);

    font-weight:600;

}

.promo-list i{

    color:var(--secondary);

}


.promo-box .note{
    margin-top: 40px;
    font-size: 11px;
    font-weight: 500;
    color: #ff2222;
    width: 300px;
    text-align: left;
}

/*==================================================
AREA LAYANAN
==================================================*/

.area-card{

    background:#fff;

    border-radius:22px;

    padding:30px 15px;

    text-align:center;

    transition:.35s;

    box-shadow:0 15px 35px rgba(15,23,42,.06);

    height:100%;

}

.area-card:hover{

    transform:translateY(-8px);

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.area-card:hover h4{

    color:#fff;

}

.area-card i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:15px;

    transition:.35s;

}

.area-card:hover i{

    color:#fff;

}

.area-card h4{

    margin:0;

    font-size:18px;

}

/*==================================================
GOOGLE MAP
==================================================*/

.map-box{

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(15,23,42,.08);

}

.map-box iframe{

    width:100%;

    height:450px;

    border:none;

}

/*==================================================
GALLERY
==================================================*/

#gallery{

    background:#F8FBFF;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    cursor:pointer;

    background:#fff;

    box-shadow:0 20px 50px rgba(15,23,42,.08);


}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.6s;

    border-radius: 28px;

    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);

}

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(15,111,255,.15),
        rgba(0,201,141,.35)
    );

    opacity:0;

    transition:.4s;

    z-index:2;

}

.gallery-item::after{

    content:"+";

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%) scale(.5);

    width:70px;

    height:70px;

    border-radius:50%;

    background:#fff;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    opacity:0;

    transition:.4s;

    z-index:3;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover::after{

    opacity:1;

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

}

/*==================================================
TESTIMONIAL
==================================================*/

.testimonial-section{

    background:#fff;

}

.testimonialSwiper{

    padding-bottom:70px;

}

.testimonial-card{

    background:#fff;

    border-radius:28px;

    padding:40px;

    box-shadow:0 20px 55px rgba(15,23,42,.08);

    border:1px solid #EEF2F7;

    height:100%;

}

.rating{

    color:#FFC107;

    font-size:22px;

    margin-bottom:18px;

}

.testimonial-card p{

    font-size:17px;

    margin-bottom:30px;

}

.customer h4{

    margin-bottom:4px;

}

.customer span{

    color:var(--gray);

}

/*==================================================
FAQ
==================================================*/

#faq{

    background:#F8FBFF;

}

.accordion-item{

    border:none;

    border-radius:18px !important;

    margin-bottom:18px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(15,23,42,.06);

}

.accordion-button{

    padding:24px 28px;

    font-weight:700;

    color:var(--dark);

    background:#fff;

}

.accordion-button:not(.collapsed){

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:25px 28px;

    line-height:1.8;

}

/*==================================================
BOOKING
==================================================*/

.booking-section{

    background:#fff;

}

.booking-card{

    background:#fff;

    border-radius:32px;

    padding:50px;

    box-shadow:0 25px 70px rgba(15,23,42,.08);

}

.booking-card label{

    font-weight:700;

    margin-bottom:8px;

    color:var(--dark);

}

.booking-card .form-control,
.booking-card .form-select{

    height:58px;

    border-radius:16px;

    border:1px solid #E5E7EB;

}

.booking-card textarea{

    min-height:150px;

    resize:none;

    border-radius:16px !important;

}

.booking-card .form-control:focus,
.booking-card .form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(15,111,255,.12);

}

/*==================================================
BOTTOM CTA
==================================================*/

.bottom-cta{

    padding:90px 0;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    text-align:center;

    color:#fff;

}

.bottom-cta h2{

    color:#fff;

}

.bottom-cta p{

    color:rgba(255,255,255,.90);

    max-width:700px;

    margin:0 auto 35px;

}

/*==================================================
FOOTER
==================================================*/

footer{

    background:#081420;

    color:#B8C5D6;

    padding:90px 0 30px;

}

footer h3,
footer h4{

    color:#fff;

    margin-bottom:25px;

}

.footer-menu li{

    margin-bottom:15px;

}

.footer-menu a{

    color:#B8C5D6;

}

.footer-menu a:hover{

    color:#fff;

    padding-left:8px;

}

footer hr{

    margin:50px 0 25px;

    border-color:rgba(255,255,255,.08);

}

/*==================================================
ANIMATION
==================================================*/

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes floatHero{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*==================================================
PREMIUM EFFECT
==================================================*/

/* Glow Border */

.glow-border{

    position:relative;

    overflow:hidden;

}

.glow-border::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary),
        var(--accent)
    );

    z-index:-2;

    opacity:0;

    transition:.4s;

}

.glow-border:hover::before{

    opacity:1;

}

/*==================================================
GLASS
==================================================*/

.glass{

    background:rgba(255,255,255,.70);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.35);

}

/*==================================================
IMAGE
==================================================*/

.img-cover{

    width:100%;

    height:100%;

    object-fit:cover;

}

.img-radius{

    border-radius:28px;

}

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

.badge-primary{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#EEF6FF;

    color:var(--primary);

    font-weight:700;

}

.badge-success{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

    background:#EAFBF5;

    color:var(--secondary);

    font-weight:700;

}

/*==================================================
ICON BOX
==================================================*/

.icon-circle{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:26px;

}

/*==================================================
HOVER EFFECT
==================================================*/

.hover-lift{

    transition:.35s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

}

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.05);

}

.shadow-hover{

    transition:.35s;

}

.shadow-hover:hover{

    box-shadow:0 30px 70px rgba(15,23,42,.18);

}

/*==================================================
BACKGROUND SHAPE
==================================================*/

.bg-circle{

    position:absolute;

    width:340px;

    height:340px;

    border-radius:50%;

    filter:blur(80px);

    z-index:-1;

}

.bg-circle.primary{

    background:rgba(15,111,255,.10);

}

.bg-circle.secondary{

    background:rgba(0,201,141,.10);

}

/*==================================================
DIVIDER
==================================================*/

.section-divider{

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    line-height:0;

}

.section-divider svg{

    width:100%;

    height:120px;

}

/*==================================================
UTILITY
==================================================*/

.radius-sm{

    border-radius:14px;

}

.radius{

    border-radius:22px;

}

.radius-lg{

    border-radius:30px;

}

.shadow-sm{

    box-shadow:0 8px 20px rgba(15,23,42,.08);

}

.shadow{

    box-shadow:0 20px 50px rgba(15,23,42,.10);

}

.shadow-lg{

    box-shadow:0 35px 80px rgba(15,23,42,.16);

}

.overflow-hidden{

    overflow:hidden;

}

.position-relative{

    position:relative;

}

/*==================================================
TEXT EFFECT
==================================================*/

.gradient-text{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.text-shadow{

    text-shadow:0 8px 30px rgba(15,111,255,.18);

}

/*==================================================
BUTTON EFFECT
==================================================*/

.btn-primary-custom{

    position:relative;

    overflow:hidden;

}

.btn-primary-custom::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:rgba(255,255,255,.25);

    transform:skewX(-30deg);

    transition:.7s;

}

.btn-primary-custom:hover::before{

    left:150%;

}

/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--primary);

    color:#fff;

}

/*==================================================
FOCUS
==================================================*/

input:focus,
textarea:focus,
select:focus{

    outline:none;

}

/*==================================================
END STYLE
==================================================*/

/*==================================================
BACK TO TOP
==================================================*/

.back-to-top{

    position:fixed;

    right:24px;

    bottom:180px;

    width:58px;

    height:58px;

    border:none;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s ease;

    box-shadow:0 18px 40px rgba(15,111,255,.30);

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:translateY(-6px);

    box-shadow:0 28px 60px rgba(15,111,255,.40);

}

.back-to-top:active{

    transform:scale(.96);

}


.ripple{

position:absolute;

width:20px;

height:20px;

border-radius:50%;

background:rgba(255,255,255,.45);

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

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

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

opacity:0;

}

}

/*=====================================
CUSTOM TOAST
=====================================*/

.custom-toast{

position:fixed;

right:20px;

bottom:25px;

background:#16a34a;

color:#fff;

padding:16px 24px;

border-radius:12px;

font-weight:600;

z-index:99999;

opacity:0;

transform:translateY(20px);

transition:.3s;

box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.custom-toast.show{

opacity:1;

transform:translateY(0);

}

.custom-toast.error{

background:#dc2626;

}

img.loaded{

animation:imageFade .6s ease;

}

@keyframes imageFade{

from{

opacity:0;

transform:scale(.98);

}

to{

opacity:1;

transform:scale(1);

}

}

/*==================================================
RESPONSIVE
Author : ChatGPT
Version : 1.0
==================================================*/


/*=============================================
XXL
1600px
=============================================*/

@media (max-width:1600px){

.hero-content h1{

font-size:60px;

}

.container{

max-width:1320px;

}

}


/*=============================================
XL
1400px
=============================================*/

@media (max-width:1400px){

.hero-content h1{

font-size:56px;

}

.hero-card{

left:0;

}

.hero-promo{

right:0;

}

.section-title h2{

font-size:42px;

}

}


/*=============================================
LAPTOP
1200px
=============================================*/

@media (max-width:1200px){

section{

padding:90px 0;

}

.hero{

padding-top:140px;

}

.hero-content h1{

font-size:48px;

}

.hero-desc{

font-size:18px;

}

.hero-image img{

width:100%;

}

.hero-card{

width:190px;

padding:20px;

}

.hero-card strong{

font-size:30px;

}

.hero-promo{

padding:20px;

}

.counter-box h2{

font-size:46px;

}

.section-title{

margin-bottom:55px;

}

.booking-card{

padding:40px;

}

.promo-box .bg {  

    bottom: -28px;

    right: -140px;

    width: 550px;

    height: auto;
}


}


/*=============================================
TABLET
992px
=============================================*/

@media (max-width:992px){

.hero{

text-align:center;

padding-top:130px;

}

.hero-content{

margin-bottom:60px;

}

.hero-content h1{

font-size:42px;

}

.hero-list{

grid-template-columns:1fr;

}

.hero-buttons{

justify-content:center;

}

.hero-card{

display:none;

}

.hero-promo{

display:none;

}

.navbar-nav{

padding-top:25px;

gap:5px;

}

.navbar-nav a{

padding:12px 0;

}

.section-title h2{

font-size:36px;

}

.cta-banner .container{

padding:45px;

text-align:center;

}

.promo-box{

padding:45px;

text-align:center;

}

.promo-box .bg {  

    bottom: -30px;

    right: -100px;

    width: 350px;
    
    height: auto;
}

.counter-box{

margin-bottom:30px;

}

footer{

text-align:center;

}

}

/*==================================================
TABLET PORTRAIT
768px
==================================================*/

@media (max-width:768px){

html{

font-size:15px;

}

section{

padding:75px 0;

}

.container{

padding-left:20px;

padding-right:20px;

}

/*==============================
HEADER
==============================*/

#header{

padding:12px 0;

}

.logo{

font-size:24px;

}

.logo img{

width:48px;

}

/*==============================
HERO
==============================*/

.hero{

min-height:auto;

padding-top:110px;

padding-bottom:70px;

}

.hero-content h1{

font-size:36px;

line-height:1.2;

}

.hero-desc{

font-size:17px;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.hero-buttons .btn-primary-custom,
.hero-buttons .btn-outline-custom{

width:100%;

justify-content:center;

}

.hero-image{

margin-top:45px;

}

.hero-image img{

width:90%;

margin:auto;

}

/*==============================
SECTION
==============================*/

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:32px;

}

.section-title p{

font-size:16px;

}

/*==============================
CARD
==============================*/

.service-card,
.feature-card,
.process-card,
.booking-card,
.trust-item{

padding:28px;

}

.service-icon,
.feature-icon,
.process-icon{

width:68px;

height:68px;

font-size:28px;

}

/*==============================
COUNTER
==============================*/

.counter-box{

padding:25px 15px;

}

.counter-box h2{

font-size:38px;

}

/*==============================
CTA
==============================*/

.cta-banner .container{

padding:35px 25px;

border-radius:0px;

}

.cta-banner .btn-primary-custom {
    margin-top: 35px;
}
  
.bottom-cta{

padding:70px 0;

}

.bottom-cta h2{

font-size:30px;

}

/*==============================
PROMO
==============================*/

.promo-box{

padding:35px 25px;

}

.promo-box .bg {  

    bottom: -30px;

    right: -100px;

    width: 330px;
    
    height: auto;
}

.promo-box .note{
    font-size: 11px;
    font-weight: 500;
    color: #ff2222;
    width: 50%;
}

/*==============================
MAP
==============================*/

.map-box iframe{

height:350px;

}

/*==============================
FOOTER
==============================*/

footer{

padding:70px 0 25px;

}

footer .col-lg-4{

margin-bottom:35px;

}

}


/*==================================================
MOBILE
576px
==================================================*/

@media (max-width:576px){

body{

font-size:15px;

}

/*==============================
TYPOGRAPHY
==============================*/

h1{

font-size:32px;

}

h2{

font-size:28px;

}

h3{

font-size:22px;

}

.promo-box .note{
    width: 100%;
    text-align: center;
}

/*==============================
HERO
==============================*/

.hero{

padding-top:100px;

}

.hero-content h1{

font-size:30px;

}

.hero-badge{

font-size:13px;

padding:10px 18px;

}

.hero-list{

gap:10px;

}

.hero-list li{

font-size:15px;

}

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

.btn-primary-custom,
.btn-outline-custom{

padding:16px 22px;

font-size:15px;

width:100%;

}

/*==============================
GALLERY
==============================*/

.gallery-item img{

height:220px;

}

/*==============================
TESTIMONIAL
==============================*/

.testimonial-card{

padding:28px;

}

/*==============================
BOOKING
==============================*/

.booking-card{

padding:25px;

}

.booking-card .form-control,
.booking-card .form-select{

height:52px;

}

.booking-card textarea{

min-height:130px;

}

/*==============================
FLOAT BUTTON
==============================*/

.float-wa,
.float-call{

width:56px;

height:56px;

font-size:24px;

right:16px;

}

.float-wa{

bottom:16px;

}

.float-call{

bottom:82px;

}

.promo-box .bg {  

    bottom: -30px;

    right: -100px;

    width: 270px;
    
    height: auto;
}


}

/*==================================================
SMALL MOBILE
430px
==================================================*/

@media (max-width:430px){

html{

font-size:14px;

}

.container{

padding-left:16px;

padding-right:16px;

}

.hero{

padding-top:90px;

padding-bottom:55px;

}

.hero-content h1{

font-size:28px;

line-height:1.25;

}

.hero-desc{

font-size:15px;

}

.section-title{

margin-bottom:35px;

}

.section-title h2{

font-size:26px;

}

.service-card,
.feature-card,
.process-card,
.trust-item,
.booking-card{

padding:22px;

border-radius:20px;

}

.gallery-item{

border-radius:18px;

}

.gallery-item img{

height:190px;

}

.counter-box h2{

font-size:34px;

}

.counter-box p{

font-size:14px;

}

.map-box iframe{

height:280px;

}

.promo-box .bg {  

    display: none;
}

footer{

padding:60px 0 20px;

}

footer h3{

font-size:22px;

}

footer h4{

font-size:18px;

}

}


/*==================================================
IPHONE / SMALL DEVICE
390px
==================================================*/

@media (max-width:390px){

.hero-content h1{

font-size:26px;

}

.hero-badge{

font-size:12px;

padding:8px 15px;

}

.hero-list li{

font-size:14px;

}

.btn-primary-custom,
.btn-outline-custom{

font-size:14px;

padding:15px 18px;

}

.section-title h2{

font-size:24px;

}

.booking-card{

padding:20px;

}

.booking-card label{

font-size:14px;

}

.gallery-item img{

height:180px;

}

}


/*==================================================
EXTRA SMALL
360px
==================================================*/

@media (max-width:360px){

.hero-content h1{

font-size:24px;

}

.hero-desc{

font-size:14px;

}

.logo{

font-size:20px;

}

.logo img{

width:40px;

}

.service-icon,
.feature-icon,
.process-icon{

width:58px;

height:58px;

font-size:22px;

}

.counter-box h2{

font-size:30px;

}

.btn-primary-custom,
.btn-outline-custom{

padding:14px 16px;

font-size:13px;

}

footer{

font-size:14px;

}

}


/*==================================================
RESPONSIVE UTILITIES
==================================================*/

.hide-mobile{

display:block;

}

.show-mobile{

display:none;

}

@media (max-width:768px){

.hide-mobile{

display:none !important;

}

.show-mobile{

display:block !important;

}

.text-center-mobile{

text-align:center !important;

}

.w-100-mobile{

width:100% !important;

}

.mt-mobile{

margin-top:30px !important;

}

.mb-mobile{

margin-bottom:30px !important;

}

}


/*==================================================
LANDSCAPE PHONE
==================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

min-height:auto;

padding:80px 0 50px;

}

.hero-image img{

max-width:320px;

}

}


/*==================================================
PRINT
==================================================*/

@media print{

#header,
.float-wa,
.float-call,
#preloader,
.scroll-indicator{

display:none !important;

}

body{

background:#fff;

color:#000;

}

a{

color:#000;

text-decoration:none;

}

}

.reveal{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.counter{

font-variant-numeric:tabular-nums;

}

.navbar-toggler {
    display: none !important;
}