:root {
    --primary: #00a4b4;
    --dark: #193847;
    --orange: #b66143;
}

.hero-section {
    background: #eefafb;
    position: relative;
    overflow: hidden;
    padding: 170px 0 20px;
    min-height: 100vh;


}

.hero-section 
 {
    transform: translateX(-60px);
}

.hero-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: #9ff6ff;
    filter: blur(120px);
    opacity: .4;
    top: 50px;
    left: 40%;
}

.small-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}

.hero-heading {
    font-size: 70px;
    line-height: 1;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 15px;
}

.hero-text {
    max-width: 600px;
    color: #5a6872;
    font-size: 20px;
    line-height: 1.5;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.hero-buttons .btn {
    padding: 14px 30px;
    font-size: 17px;
    border-radius: 15px;
    font-weight: 600;
    transition: all 0.9s ease;
}

.btn-start {
    background: var(--orange);
    color: #fff;
    padding: 16px 35px;
    border-radius: 14px;
}

.btn-cost {
    background: var(--primary);
    color: #fff;
    padding: 16px 35px;
    border-radius: 14px;
    font-weight:600;
}
.btn-viewpackage {
    background: #15b4a7;
    color: #fff;
    padding: 16px 35px;
    border-radius: 14px;
    border: 2px solid #005d73;
    font-weight:600;
    
}

.btn-service {
    background: #fff;
    color: #000; 
    border: 2px solid var(--primary);
    padding: 16px 35px;
    border-radius: 14px;
    border: 2px solid #000;
    font-weight:600;
}

.btn-start,
.btn-cost,
.btn-viewpackage,
.btn-service {
    display: inline-block;
    text-decoration: none;
}

.btn-start:hover,
.btn-cost:hover,
.btn-viewpackage:hover,
.btn-service:hover {
    transform: translateY(-5px);
}


.hero-image-box {
    position: relative;
    transform: translateX(90px);
}



.hero-image {
    width: 550px;
    height: 550px;
    /* Increase from current height */
    object-fit: cover;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
    border: 6px solid #fff;
    animation: floatImage 4s ease-in-out infinite;
}

@keyframes floatImage {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.review-card {
    position: absolute;
    top: 25px;
    right: -20px;
    background: #fff;
    border-radius: 20px;
    padding: 18px;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .12);
    
    animation: reviewSlide 10s infinite;
}


@keyframes reviewSlide {

    0% {
        opacity: 0;
        transform: translateX(60px);
    }

    15% {
        opacity: 1;
        transform: translateX(0);
    }

    75% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(60px);
    }

}
.review-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    background: #e7ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    
    animation:coinAir 7s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes coinAir{

    0%{
        transform:translateY(0) rotateY(0deg);
    }

    25%{
        transform:translateY(-10px) rotateY(180deg);
    }

    50%{
        transform:translateY(-18px) rotateY(360deg);
    }

    75%{
        transform:translateY(-10px) rotateY(540deg);
    }

    100%{
        transform:translateY(0) rotateY(720deg);
    }
}

.stars {
    color: #ffb400;
}

@media(max-width:992px) {

    .hero-heading {
        font-size: 60px;
    }

    .hero-subtitle {
        font-size: 42px;
    }

    .hero-image-box {
        margin-top: 50px;
    }
}

.navbar {
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .05);
    padding: 18px 0;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: #1f3847;
}

.navbar-nav .active {
    color: var(--primary);
    border-bottom: 3px solid var(--primary);
}

.btn-login:hover {
    background: #00a7b5;
    color: #fff;
    border-color: #00a7b5;
}


.btn-book:hover {
    background: #00a7b5;
    color: #fff;
}


.btn-login {
    border: 2px solid var(--primary);
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 15px;
}

.btn-book {
    background: var(--orange);
    color: white;
    padding: 8px 20px;
    border-radius: 10px;
    font-size: 15px;
}

.nav-buttons {
    transform: translateX(60px);
}

.navbar-brand {
    transform: translateX(-60px);
}


/* Trusted Box */

.trusted-box {
    background: #fff;
    border: 1px solid #d7eef2;
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .05);
}

.trusted-title {
    color: #6c757d;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 18px;
}

.trusted-tags {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.trusted-tag {
    padding: 10px 18px;
    background: #eefcfd;
    border: 1px solid #bcecef;
    border-radius: 30px;
    color: #00889a;
    font-weight: 600;
}

/* Growth Card */

.growth-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    transform: translateX(90px);
    margin-left: 90px;
    animation: floatImage 4s ease-in-out infinite;
}

.growth-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #0ca8b5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    flex-shrink: 0;
}

.growth-content small {
    color: #6c757d;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

.growth-content h3 {
    margin: 0;
    color: #00889a;
    font-size: 34px;
    font-weight: 700;
}


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

.impact-section {
    padding: 75px 0;
    background: #fff;
}

.impact-title {
    font-size: 50px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 15px;
}

.impact-subtitle {
    font-size: 28px;
    color: #58595a;
}

.impact-card {
    background: #fff;
    border: 1px solid #dde9ee;
    border-radius: 24px;
    padding: 45px 25px;
    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition: .4s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.impact-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 25px 45px rgba(0, 164, 180, .18);

}

.impact-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 30px;
    background: #009fb0;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    box-shadow: 0 10px 25px rgba(0, 164, 180, .35);
}

.impact-card h2 {
    color: #00a4b4;
    font-size: 25px;
    font-weight: 500;
    margin-bottom: 15px;
}

.impact-card p {
    font-size: 20px;
    color: #58595a;
    margin: 0;

}

.impact-btn {

    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #009fb0;
    color: #fff;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    transition: .35s;
}

.impact-btn:hover {
    background: #0b8b99;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 164, 180, .3);
}

/*=====================================
        WHY CHOOSE US SECTION
======================================*/

.why-section {
    padding: 70px 0;
    background: #fff;
    
}

/* Heading */

.why-title {
    font-size: 48px;
    font-weight: 800;
    color: #0f3444;
    margin-bottom: 15px;
}

.why-title span {
    color: #00a7b5;
}

.why-subtitle {
    max-width: 850px;
    margin: 0 auto 45px;
    font-size: 17px;
    line-height: 1.8;
    color: #67737d;
}

/*=====================================
            LEFT CARDS
======================================*/

.choose-card {

    display: flex;
    align-items: flex-start;
    gap: 18px;
    width:550px;
    background: #fff;
    border: 1px solid #dce8ec;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    transition: .35s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
    transform: translateX(-50px);   

}

.choose-card:hover { 
    box-shadow: 0 15px 35px rgba(0, 164, 180, .15);
    border-left:5px solid #00a7b5;

}

/* Icon */

.choose-icon {

    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: #eafafb;
    color: #00a7b5;
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;

}

/* Content */

.choose-card h4 {

    font-size: 24px;
    font-weight: 700;
    color: #0f3444;
    margin-bottom: 8px;
}
.choose-card p {
    font-size: 15px;
    color: #67737d;
    line-height: 1.7;
    margin: 0;

}

/*=====================================
            RIGHT IMAGES
======================================*/

.workspace-big {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    transform: translateX(110px);
}
.workspace-big img {
    width: 600px;
    height: 300px;
    object-fit: cover;
    transition: .4s;
}
.workspace-big:hover img {
   transform: scale(1.05);
}
.workspace-label {
    position: absolute;
    left: 18px;
    bottom: 18px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-shadow: 0 3px 8px rgba(0, 0, 0, .4);
}
/* Small Images */
.workspace-small {
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    transform: translateX(110px);
}
.workspace-small img {
    width: 100%;
    height: 155px;
    object-fit: cover;
    transition: .4s;
}
.workspace-small:hover img {
    transform: scale(1.08);
}

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

@media (max-width:992px) {
    .why-title {
        font-size: 38px;
    }
    .why-subtitle {
        font-size: 16px;
        margin-bottom: 35px;
    }
    .workspace-big {
        margin-top: 20px;
     }

}
@media (max-width:768px) {
    .why-section {
        padding: 60px 0;
    }
    .why-title {
        font-size: 32px;
    }
    .choose-card {
        padding: 18px;
    }
    .choose-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 20px;
    }
    .choose-card h4 {
        font-size: 20px;
    }
    .workspace-big img {
        height: 260px;
    }
    .workspace-small img {
        height: 130px;
    }
}

/*========== Domain Expertise ==========*/

.domain-section{
    padding:80px 0;
    background:#f2f8f8;
    position:relative;
}

.section-title{
    font-size:54px;
    font-weight:800;
    color:#123848;
}

.section-title span{
    color:#00a7b5;
}

.section-subtitle{
    max-width:620px;
    margin:15px auto 0;
    font-size:20px;
    color:#66737d;
    line-height:1.7;
}

.domain-card{
    height:170px;
    border:1px solid #cde8ec;
    border-radius:18px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:.35s;
    cursor:pointer;
}

.domain-card:hover{
    transform:translateY(-15px);
    box-shadow:0 20px 40px rgba(0,164,180,.18);
    border-bottom:5px solid #00a7b5;
}

.domain-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    background:#d8f5f7;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#00a7b5;
    margin-bottom:18px;
}

.domain-card h5{
    font-size:22px;
    font-weight:700;
    color:#123848;
    margin:0;
}

.domain-card.brown .domain-icon{
    background:#f3e6df;
    color:#9d5c41;
}
 

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

.technology-section{
    padding:90px 0;
    background:#eefafb;
    position:relative;
    overflow:hidden;
}

.technology-title{
    font-size:54px;
    font-weight:800;
    color:#123848;
    margin-bottom:15px;
}

.technology-title span{
    color:#00a7b5;
}

.technology-subtitle{
    max-width:650px;
    margin:0 auto 50px;
    font-size:18px;
    line-height:1.7;
    color:#66737d;
}

.tech-filter{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:30px;
}

.tech-btn{
    padding:12px 22px;
    border:none;
    border-radius:30px;
    background:#fff;
    color:#123848;
    font-size:15px;
    font-weight:600;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.3s;
}

.tech-btn i{
    margin-right:8px;
}

.tech-btn.active,
.tech-btn:hover{
    background:#00a7b5;
    color:#fff;
    transform:translateY(-3px);
    
}

.tech-card{
    height:90px;
    background:#fff;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
    cursor:pointer;
}

.tech-card:hover{
    transform:translateY(-8px);
    border:2px solid #00a7b5;
    box-shadow:0 20px 40px rgba(0,164,180,.18); 
    
}

.tech-card img{
    width:48px;
    height:48px;
    object-fit:contain;
    transition:.35s;
}

.tech-card:hover img{
    transform:scale(1.15) rotate(6deg);
 }

.technology-image{
    position:relative;
    text-align:center;
}

.main-image{
    width:92%;
    border-radius:18px;
    background:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    transition:.4s;
}

.technology-image:hover .main-image{
    transform:scale(1.02);
}

.floating-icons{
    position:absolute;
    top:-18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:5;
}

.floating-icons span{
    width:42px;
    height:42px;
    border-radius:10px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
    animation:floatIcon 3s ease-in-out infinite;
}

.floating-icons span:nth-child(2){animation-delay:.2s;}
.floating-icons span:nth-child(3){animation-delay:.4s;}
.floating-icons span:nth-child(4){animation-delay:.6s;}
.floating-icons span:nth-child(5){animation-delay:.8s;}
.floating-icons span:nth-child(6){animation-delay:1s;}

.floating-icons img{
    width:22px;
    height:22px;
}

@keyframes floatIcon{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

@media(max-width:992px){
    .technology-title{font-size:40px;}
    .technology-image{margin-top:40px;}
    .main-image{width:100%;}
}

@media(max-width:768px){
    .technology-section{padding:70px 0;}
    .technology-title{font-size:32px;}
    .technology-subtitle{font-size:16px;}
    .tech-filter{justify-content:center;}
    .tech-btn{padding:10px 18px;font-size:14px;}
    .tech-card{height:75px;}
    .tech-card img{width:40px;height:40px;}
}

/*========== TESTIMONIAL SECTION ==========*/
.testimonial-section{
padding:70px 0;
background:#e3f7f7;
text-align:center;
}

.testimonial-title{
font-size:48px;
font-weight:700;
color:#0b2d3a;
margin-bottom:10px;
}

.testimonial-title span{
color:#00a7b5;
}

.testimonial-subtitle{
max-width:650px;
margin:0 auto 45px;
color:#667;
font-size:17px;
line-height:1.6;
}

.testimonial-card{
position:relative;
background:#fff;
border-radius:16px;
padding:35px 40px;
max-width:900px;
margin:auto;
box-shadow:0 15px 40px rgba(0,0,0,.08);
text-align:left;
}

.quote-icon{
font-size:34px;
color:#b8eef3;
margin-bottom:10px;
}

.testimonial-stars{
color:#ffb400;
font-size:18px;
margin-bottom:15px;
letter-spacing:2px;
}

.testimonial-text{
font-size:16px;
color:#555;
line-height:1.7;
margin-bottom:20px;
font-style:italic;
}

.testimonial-card hr{
margin:20px 0;
border:none;
border-top:1px solid #eee;
}

.testimonial-user{
display:flex;
align-items:center;
gap:15px;
}

.user-avatar{
width:48px;
height:48px;
border-radius:50%;
background:#2d8cff;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
font-weight:700;
}

.user-info h5{
margin:0;
font-size:18px;
font-weight:700;
color:#163847;
}

.user-info p{
margin:2px 0 0;
font-size:14px;
color:#00a7b5;
}

.slider-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:42px;
height:42px;
border-radius:50%;
background:#fff;
border:1px solid #eee;
color:#999;
cursor:pointer;
transition:.3s;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.prev{
left:-21px;
}

.next{
right:-21px;
}

.slider-btn:hover{
background:#00a7b5;
color:#fff;
border-color:#00a7b5;
}

.testimonial-dot{
width:8px;
height:8px;
background:#00a7b5;
border-radius:50%;
margin:22px auto;
}

.testimonial-btn{
margin-top:20px;
}

.testimonial-btn a{
display:inline-flex;
align-items:center;
gap:10px;
background:#00a7b5;
color:#fff;
padding:14px 35px;
border-radius:50px;
font-weight:600;
text-decoration:none;
transition:.3s;
}

.testimonial-btn a:hover{
background:#0b8895;
transform:translateY(-4px);
box-shadow:0 15px 30px rgba(0,167,181,.3);
}

/*========== FAQ SECTION ==========*/ 
.faq-section{
    padding:90px 0;
    background:#eefafb;
    position:relative;
    overflow:hidden;
}

.faq-title{
    font-size:58px;
    font-weight:800;
    text-align:center;
    color:#123646;
    line-height:1.1;
    margin-bottom:12px;
}

.faq-title span{
    color:#00a7b5;
}

.faq-subtitle{
    max-width:650px;
    margin:0 auto 45px;
    text-align:center;
    color:#6c7b85;
    font-size:18px;
    line-height:1.7;
}

.accordion{
    max-width:920px;
    margin:auto;
}

.accordion-item{
    border:none!important;
    background:transparent;
    margin-bottom:18px;
}

.accordion-button{
    background:#fff!important;
    border-radius:16px!important;
    min-height:72px;
    padding:0 28px;
    font-size:16px;
    font-weight:600;
    color:#193847!important;
    box-shadow:0 10px 28px rgba(0,164,180,.08);
    transition:.35s;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-button:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(0,164,180,.15);
    border-left:5px solid #00a7b5;
}

.accordion-button:not(.collapsed){
    background:#fff!important;
    color:#00a7b5!important;
    border-left:5px solid #00a7b5;
    box-shadow:0 18px 35px rgba(0,164,180,.15);
}

.accordion-button i{
    width:34px;
    height:34px;
    background:#e9fcff;
    color:#00a7b5;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:14px;
    font-size:14px;
}

.accordion-button::after{
    width:18px;
    height:18px;
    background-size:18px;
}

.accordion-collapse{
    margin-top:-10px;
}

.accordion-body{
    background:#fff;
    border-radius:0 0 16px 16px;
    padding:22px 30px 25px;
    color:#687883;
    line-height:1.8;
    box-shadow:0 15px 28px rgba(0,164,180,.08);
}

.faq-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:40px;
    background:#009fb0;
    color:#fff;
    padding:14px 34px;
    border-radius:50px;
    font-size:16px;
    font-weight:600;
    text-decoration:none;
    transition:.35s;
}

.faq-btn:hover{
    color:#fff;
    background:#008796;
    transform:translateY(-6px);
    box-shadow:0 20px 35px rgba(0,164,180,.30);
}
/*========== Digital Success SECTION ==========*/ 

.cta-section{
    background:linear-gradient(90deg,#083f45,#008ea0);
    padding:90px 0;
    text-align:center;
    overflow:hidden;
}

.cta-title{
    font-size:50px;
    font-weight:800;
    line-height:1.15;
    color:#fff;
    margin-bottom:25px;
}

.cta-title span{
    color:#58d8de;
}

.cta-text{
    max-width:760px;
    margin:0 auto 45px;
    color:rgba(255,255,255,.92);
    font-size:22px;
    line-height:1.7;
}

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:22px;
    flex-wrap:wrap;
}

.cta-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:18px 42px;
    border-radius:60px;
    font-size:22px;
    font-weight:600;
    text-decoration:none;
    transition:.35s ease;
}

.cta-primary{
    background:#b86143;
    color:#fff;
}

.cta-primary:hover{
    background:#9f4f34;
    color:#fff;
    transform:translateY(-6px);
    box-shadow:0 20px 35px rgba(0,0,0,.25);
}

.cta-light{
    background:#fff;
    color:#163847;
}

.cta-light:hover{
    background:#00a7b5;
    color:#fff;
    transform:translateY(-6px);
    box-shadow:0 20px 35px rgba(0,167,181,.35);
}

@media(max-width:992px){

    .cta-title{
        font-size:46px;
    }

    .cta-text{
        font-size:18px;
    }

    .cta-btn{
        width:100%;
        justify-content:center;
        font-size:18px;
    }

}


/* chatbox */
.chat-widget{
    position:fixed;
    right:25px;
    bottom:25px;
    z-index:9999;
}

.chat-popup{
    position:relative;
    margin-bottom:8px;
    animation:popup .8s ease;
}

.chat-message{
    background:#25D366;
    color:#fff;
    padding:10px 16px;
    border-radius:12px;
    font-size:18px;
    font-weight:700;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    position:relative;
}

.chat-message::after{
    content:'';
    position:absolute;
    right:20px;
    bottom:-6px;
    width:12px;
    height:12px;
    background:#25D366;
    transform:rotate(45deg);
}

.close-chat{
    position:absolute;
    top:-20px;
    right:-18px;
    width:28px;
    height:28px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#25D366;
    font-size:18px;
    font-weight:bold;
    cursor: pointer; ;
    box-shadow:0 3px 10px rgba(0,0,0,.15);
}

.whatsapp-btn{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    font-size:30px;
    border:3px solid #fff;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    transition:.3s;
    animation:float 2.5s infinite;
}

.whatsapp-btn:hover{
    transform:scale(1.08);
    color:#fff;
}

/* Dropdown Services */

.service-menu{
    position:relative;
}

.service-dropdown{
    position:absolute;
    top:48px;
    left:-90px;
    width:320px;
    background:#fff;
    border-radius:15px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
    overflow:hidden;
    display:none;
    z-index:999;
}

.service-dropdown.show{
    display:block;
    animation:popup .25s ease;
}

@keyframes popup{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.menu-title{
    text-align:center;
    padding:18px;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    color:#666;
    border-bottom:1px solid #eee;
}

.service-dropdown a{
    display:block;
    padding:12px 22px;
    text-decoration:none;
    color:#203846;
    font-size:17px;
    transition:.25s;
}

.service-dropdown a:hover{
    background:#eefbfc;
    color:#00a7b5;
}

.service-dropdown a.active{
    background:#e7f7fa;
    color:#00a7b5;
}

.menu-buttons{
    padding:12px;
    border-top:1px solid #eee;
}

.btn-view,
.btn-package{
    width:100%;
    height:42px;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
}

.btn-view{
    background:#12b1be;
    color:#fff;
    border:none;
    margin-bottom:10px;
}

.btn-package{
    background:#fff;
    color:#12b1be;
    border:2px solid #12b1be;
}


/* BLOG CSS */

.blog-hero{
    background:#def3f5;
    padding:35px 0 120px;
    min-height:620px;
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;   
}

.blog-hero::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:#b7f4ff;
    filter:blur(120px);
    opacity:.45;
    left:28%;
    top:40px;
}

.blog-hero::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    background:#d7f3fb;
    border-radius:50%;
    right:-40px;
    top:20px;
}
 
 .col-lg-7{
    transform: translateX(-60px); 
}
.breadcrumb-nav{
    margin-bottom:90px;
    font-size:16px;
    font-weight:500; 
    
}

.breadcrumb-nav a{
    text-decoration:none;
    color:#00a7b5;
}

.breadcrumb-nav span{
    margin:0 6px;
    color:#555;
}

.blog-small-title{
    font-size:18px;
    font-weight:700;
    color:#222;
    margin-bottom:10px;
}

.blog-title{
    font-size:62px;
    font-weight:800;
    line-height:1.05;
    color:#00a7b5;
    margin-bottom:22px;
}

.blog-title span{
    color:#00a7b5;
}

.blog-text{
    max-width:520px;
    font-size:18px;
    line-height:1.65;
    color:#66727d;
    margin-bottom:28px;
}

.blog-buttons{
    display:flex;
    gap:15px;
    margin-bottom:35px;
}

.btn-read{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#a85b3d;
    color:#fff;
    padding:13px 30px;
    border-radius:10px;
    font-size:17px;
    font-weight:600;
    transition:.3s;
    box-shadow:0 10px 20px rgba(168,91,61,.25);
}

.btn-read:hover{
    color:#fff;
    background:#91492d;
    transform:translateY(-3px);
}

.btn-subscribe{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#fff;
    color:#173847;
    border:2px solid #173847;
    padding:13px 30px;
    border-radius:10px;
    font-size:17px;
    font-weight:600;
    transition:.3s;
}

.btn-subscribe:hover{
    background:#173847;
    color:#fff;
    transform:translateY(-3px);
}

.trusted-company{
    display:flex;
    align-items:center;
    gap:18px;
    font-size:16px;
    color:#777;
}

.trusted-company strong{
    color:#173847;
    font-weight:700;
}

.contact-box{
    width:440px;
    background:#fff;
    padding:35px;
    border-radius:18px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
    margin-left:auto;
    position:relative;
    transform:translateY(100px); 
}

.contact-box h2{
    font-size:28px;
    font-weight:700;
    color:#163847;
    margin-bottom:28px;
}

.contact-box label{
    display:block;
    margin-bottom:6px;
    font-size:14px;
    font-weight:600;
    color:#0a8396;
}

.contact-box label span{
    color:red;
}

.contact-box .form-control,
.contact-box .form-select{
    height:40px;
    border:1px solid #d6dde3;
    border-radius:6px;
    box-shadow:none;
    font-size:14px;
}

.contact-box textarea.form-control{
    height:80px;
    resize:none;
}

.contact-box .form-control:focus,
.contact-box .form-select:focus{
    border-color:#00a7b5;
    box-shadow:0 0 0 .15rem rgba(0,167,181,.12);
}

.phone-code{
    max-width:120px;
}

.send-btn{
    width:100%;
    height:48px;
    border:none;
    border-radius:8px;
    background:#a85b3d;
    color:#fff;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.send-btn:hover{
    background:#91492d;
    transform:translateY(-2px);
}

.circle-one{
    position:absolute;
    width:65px;
    height:65px;
    background:#c9eef6;
    border-radius:50%;
    right:20px;
    top:30px;
    opacity:.8;
}

.circle-two{
    position:absolute;
    width:35px;
    height:35px;
    background:#d8b5a7;
    border-radius:50%;
    right:45px;
    top:170px;
    opacity:.5;
}

@media(max-width:991px){

.blog-hero{
    padding:50px 0;
}

.blog-left{
    padding-right:0;
    margin-bottom:50px;
}

.blog-title{
    font-size:46px;
}

.blog-text{
    max-width:100%;
}

.blog-buttons{
    flex-wrap:wrap;
}

.contact-box{
    width:100%;
    margin:auto;
}

}

.blog-section{
background:#fff;
padding:55px 0;
position:relative;
overflow:hidden;
}

.blog-section .container{
max-width:1250px;
}

.section-header{
text-align:center;
margin-bottom:35px;
}

.section-header h2{
font-size:46px;
font-weight:800;
color:#163847;
margin-bottom:8px;
}

.section-header h2 span{
color:#00a7b5;
}

.section-header p{
font-size:16px;
color:#66727d;
max-width:560px;
margin:auto;
line-height:1.6;
}

.blog-filter{
margin-bottom:25px;
}

.blog-filter h5{
font-size:20px;
font-weight:700;
color:#163847;
margin-bottom:18px;
}

.filter-buttons{
display:flex;
flex-wrap:wrap;
gap:10px;
padding-bottom:18px;
border-bottom:1px solid #e5edf1;
}

.filter-buttons button{
background:#fff;
border:1px solid #bdebf1;
padding:9px 18px;
border-radius:30px;
font-size:14px;
font-weight:600;
color:#008ea1;
transition:.3s;
}

.filter-buttons button:hover,
.filter-buttons button.active{
background:#00a7b5;
border-color:#00a7b5;
color:#fff;
}

.blog-card{
background:#fff;
border-radius:15px;
overflow:hidden;
border:1px solid #edf1f5;
box-shadow:0 10px 22px rgba(0,0,0,.06);
transition:.3s;
height:100%;
display:flex;
flex-direction:column;
}

.blog-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 35px rgba(0,167,181,.15);
border-color:#00a7b5;
}

.blog-image{
position:relative;
height:180px;
overflow:hidden;
}

.blog-image img{
width:100%;
height:100%;
object-fit:cover;
transition:.4s;
}

.blog-card:hover img{
transform:scale(1.06);
}

.blog-category{
position:absolute;
top:12px;
right:12px;
background:#00a7b5;
color:#fff;
padding:5px 12px;
border-radius:20px;
font-size:11px;
font-weight:700;
}

.blog-content{
padding:20px;
display:flex;
flex-direction:column;
flex:1;
}
.about-breadcrumb{
margin-bottom:30px;
}

.blog-content h3{
font-size:24px;
font-weight:700;
line-height:1.4;
color:#005d73;
margin-bottom:10px;
transition:.3s;
}

.blog-card:hover h3{
color:#00a7b5;
}

.blog-date{
font-size:13px;
color:#8b9299;
margin-bottom:12px;
}

.blog-content p{
font-size:15px;
line-height:1.7;
color:#66727d;
margin-bottom:18px;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

.blog-btn{
margin-top:auto;
height:42px;
background:#00a7b5;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:15px;
font-weight:600;
color:#fff;
transition:.3s;
}

.blog-btn:hover{
background:#008c98;
color:#fff;
}

@media(max-width:991px){

.blog-section{
padding:45px 0;
}

.section-header h2{
font-size:38px;
}

.blog-filter h5{
font-size:18px;
}

.blog-content{
padding:18px;
}

.blog-content h3{
font-size:21px;
}

.blog-image{
height:170px;
}

}

@media(max-width:767px){

.blog-section{
padding:40px 0;
}

.section-header h2{
font-size:30px;
}

.section-header p{
font-size:15px;
}

.blog-filter{
text-align:center;
}

.filter-buttons{
justify-content:center;
gap:8px;
}

.filter-buttons button{
padding:8px 15px;
font-size:13px;
}

.blog-image{
height:160px;
}

.blog-content h3{
font-size:19px;
}

.blog-content p{
font-size:14px;
}

.blog-btn{
height:40px;
font-size:14px;
}

}
 
/*==========================
   Portfolio FEATURED PROJECTS
==========================*/

.featured-projects{
    padding:80px 0;
    background:#fff;
}

.featured-projects .container{
    max-width:1180px;
}

/* Heading */

.project-title{
    font-size:48px;
    font-weight:800;
    color:#0a3343;
    margin-bottom:10px;
}

.project-subtitle{
    font-size:18px;
    color:#66727d;
    margin:0;
}

/* Button */

.discuss-btn{
    background:#008da1;
    color:#fff;
    padding:12px 28px;
    border-radius:8px;
    font-size:16px;
    font-weight:600;
    transition:.3s;
    text-decoration:none;
}

.discuss-btn:hover{
    background:#007d8f;
    color:#fff;
}

/* Card */

.project-card{
    background:#fff;
    border:1px solid #e8edf1;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.35s;
    height:100%;
}

.project-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

/* Image */

.project-image{
    position:relative;
    overflow:hidden;
    height:215px;
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.project-card:hover img{
    transform:scale(1.05);
}

/* Badge */

.project-badge{
    position:absolute;
    top:14px;
    left:14px;
    background:#11b4c3;
    color:#fff;
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.project-badge.blue{
    background:#17a9d8;
}

/* Content */

.project-content{
    padding:22px;
}

.client-name{
    font-size:14px;
    color:#6f7b86;
    margin-bottom:12px;
}

.client-name i{
    margin-right:6px;
    color:#8b97a2;
}

.project-content h4{
    font-size:28px;
    line-height:1.35;
    color:#0b3d4c;
    font-weight:700;
    margin-bottom:15px;
}

.project-content p{
    color:#67727d;
    font-size:16px;
    line-height:1.7;
    margin-bottom:18px;
}

/* Tags */

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}

.project-tags span{
    border:1px solid #dbe6eb;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    color:#6a7782;
    background:#fff;
}

/* Footer */

.project-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:15px;
}

.project-footer span{
    color:#74808b;
    font-size:15px;
}

.project-footer a{
    text-decoration:none;
    color:#008ea1;
    font-weight:600;
    transition:.3s;
}

.project-footer a:hover{
    color:#006f7c;
}

.project-content hr{
    margin:18px 0;
    border-color:#edf1f4;
}

/* Responsive */

@media(max-width:992px){

.project-title{
    font-size:38px;
}

.discuss-btn{
    margin-top:20px;
}

.project-image{
    height:200px;
}

.project-content h4{
    font-size:24px;
}

}

@media(max-width:768px){

.featured-projects{
    padding:60px 0;
}

.project-title{
    font-size:32px;
}

.project-subtitle{
    font-size:16px;
}

.project-content{
    padding:18px;
}

.project-content h4{
    font-size:21px;
}

.project-image{
    height:180px;
}

.discuss-btn{
    width:100%;
    text-align:center;
}

}