.elementor-454 .elementor-element.elementor-element-c10fd87{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:200px;--padding-bottom:70px;--padding-left:10px;--padding-right:10px;}.elementor-454 .elementor-element.elementor-element-c10fd87:not(.elementor-motion-effects-element-type-background), .elementor-454 .elementor-element.elementor-element-c10fd87 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-secondary ) 0%, #02251D 100%);}.elementor-454 .elementor-element.elementor-element-9ec6a49{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-454 .elementor-element.elementor-element-03f6a43{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-454 .elementor-element.elementor-element-09611ca{font-family:"Sora", Sans-serif;font-size:15px;font-weight:700;color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-454 .elementor-element.elementor-element-d7de6c1{text-align:start;}.elementor-454 .elementor-element.elementor-element-d7de6c1 .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:64px;font-weight:700;line-height:72px;color:#EDF9F5;}.elementor-454 .elementor-element.elementor-element-3b79c4d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-454 .elementor-element.elementor-element-ec07e3d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}.elementor-454 .elementor-element.elementor-element-ec07e3d:not(.elementor-motion-effects-element-type-background), .elementor-454 .elementor-element.elementor-element-ec07e3d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#080C0B;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-454 .elementor-element.elementor-element-4d7a281{--divider-border-style:solid;--divider-color:#00D4A1;--divider-border-width:1px;}.elementor-454 .elementor-element.elementor-element-4d7a281 .elementor-divider-separator{width:150px;margin:0 auto;margin-center:0;}.elementor-454 .elementor-element.elementor-element-4d7a281 .elementor-divider{text-align:center;padding-block-start:2px;padding-block-end:2px;}.elementor-454 .elementor-element.elementor-element-4d7a281 .elementor-divider__text{color:#00D4A1;font-family:"Sora", Sans-serif;font-size:15px;font-weight:700;text-transform:uppercase;}.elementor-454 .elementor-element.elementor-element-f724bdc{text-align:center;}.elementor-454 .elementor-element.elementor-element-f724bdc .elementor-heading-title{font-family:"Sora", Sans-serif;font-size:48px;font-weight:800;color:#FFFFFF;}.elementor-454 .elementor-element.elementor-element-fc7f4d7{text-align:center;font-family:"Sora", Sans-serif;font-weight:400;color:#6E9488;}.elementor-454 .elementor-element.elementor-element-7c408f1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-454 .elementor-element.elementor-element-63f1762 .elementor-button{background-color:transparent;font-family:"Sora", Sans-serif;font-size:20px;font-weight:600;text-transform:uppercase;fill:#FFFFFF;color:#FFFFFF;background-image:linear-gradient(135deg, #00D4A1 0%, #00A67E 100%);border-radius:16px 16px 16px 16px;padding:20px 32px 20px 32px;}.elementor-454 .elementor-element.elementor-element-63f1762 .elementor-button-content-wrapper{flex-direction:row;}.elementor-454 .elementor-element.elementor-element-57fdaf5 .elementor-button{background-color:transparent;font-family:"Sora", Sans-serif;font-size:20px;font-weight:600;fill:#00D4A1;color:#00D4A1;background-image:linear-gradient(180deg, #FFFFFF00 0%, #F2295B00 100%);border-style:solid;border-width:3px 3px 3px 3px;border-color:#00A67E;border-radius:16px 16px 16px 16px;padding:18px 32px 18px 32px;}.elementor-454 .elementor-element.elementor-element-57fdaf5 .elementor-button-content-wrapper{flex-direction:row;}.elementor-454 .elementor-element.elementor-element-e6eb03f{--divider-border-style:dotted;--divider-color:#007A5C61;--divider-border-width:1px;}.elementor-454 .elementor-element.elementor-element-e6eb03f .elementor-divider-separator{width:48%;margin:0 auto;margin-center:0;}.elementor-454 .elementor-element.elementor-element-e6eb03f .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}@media(min-width:768px){.elementor-454 .elementor-element.elementor-element-03f6a43{--width:60%;}.elementor-454 .elementor-element.elementor-element-3b79c4d{--width:40%;}}@media(max-width:767px){.elementor-454 .elementor-element.elementor-element-c10fd87{--padding-top:120px;--padding-bottom:45px;--padding-left:12px;--padding-right:12px;}.elementor-454 .elementor-element.elementor-element-d7de6c1 .elementor-heading-title{font-size:36px;line-height:43px;}.elementor-454 .elementor-element.elementor-element-f724bdc .elementor-heading-title{font-size:30px;}}/* Start custom CSS for text-editor, class: .elementor-element-09611ca */.pn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #16D7B0;
  font-family: 'Sora', sans-serif;
}
.pn-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #16D7B0;
  border-radius: 50%;
  flex-shrink: 0;
}
.pn-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: #16D7B0;
  flex-shrink: 0;
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-d7de6c1 */.typewriter-heading {
    font-weight: 700;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;

    line-height: 1.1;
}

.typewriter-text {
    color: #00FFB3;

    display: inline-block;
    overflow: hidden;

    white-space: nowrap;

    border-right: 3px solid #00FFB3;

    width: 0;

    animation:
    typing 3s steps(15) forwards,
    blink 0.7s infinite;
}

/* Typing Animation */
@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 15ch;
    }
}

/* Cursor Blink */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}

/* Mobile */
@media(max-width:768px){

    .typewriter-heading{
        line-height:1.2;
    }

    .typewriter-text{
        animation: typingMobile 3s steps(10) forwards,
        blink 0.7s infinite;
    }

    @keyframes typingMobile{
        to{
            width:10ch;
        }
    }

}

@media(max-width:768px){

    .typewriter-heading{
        line-height:1.2;
    }

    .typewriter-text{

        animation:
        typingMobile 3s steps(16) forwards,
        blink 0.7s infinite;
    }

    @keyframes typingMobile{

        from{
            width:0;
        }

        to{
            width:16ch;
        }

    }

}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-b3b641f *//* Add this in Elementor -> Advanced -> Custom CSS */
.elementor-454 .elementor-element.elementor-element-b3b641f img {
  animation: spinBall 10s linear infinite;
  transform-origin: center;
  border-radius: 50%; /* Make it round */
}

@keyframes spinBall {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.elementor-454 .elementor-element.elementor-element-b3b641f img:hover {
  animation-play-state: paused;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c10fd87 *//* ১. নির্দিষ্ট সেকশনের ব্যাকগ্রাউন্ড এবং জালি জালি (Grid) ইফেক্ট */
.marine-hero-box {
    position: relative;
    background-color: #0a1628; /* নেভি ব্লু ব্যাকগ্রাউন্ড */
    overflow: hidden; /* জাহাজ যেন সেকশনের বাইরে না যায় */
    z-index: 1;
}

/* জালি জালি গ্রিড লেয়ার */
.marine-hero-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(200, 146, 42, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200, 146, 42, 0.05) 1px, transparent 1px);
    background-size: 50px 50px; /* ঘর গুলোর সাইজ এখান থেকে ছোট-বড় করতে পারবেন */
    z-index: -1;
    pointer-events: none;
}

/* ২. জাহাজের কন্টেইনার স্টাইল */
.marine-hero-box .moving-ship {
    position: absolute;
    bottom: 20px; /* একদম নিচে রাখার জন্য */
    left: -150px; /* শুরুতে স্ক্রিনের বাইরে থাকবে */
    width: 300px; /* জাহাজের সাইজ */
    opacity: 0.15; /* হালকা দেখানোর জন্য */
    z-index: 0;
    pointer-events: none;
    animation: shipSlide 15s linear infinite; /* ১৫ সেকেন্ড পর পর স্লাইড হবে */
}

/* ৩. জাহাজ ডানে-বামে স্লাইডিং এনিমেশন */
@keyframes shipSlide {
    0% {
        left: -300px;
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px); /* মাঝপথে হালকা একটু উপরে উঠবে ঢেউয়ের মতো */
    }
    100% {
        left: 100%; /* একদম ডান দিকে বের হয়ে যাবে */
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-f724bdc *//* ===== PixelNest Gradient Loop Animation ===== */

.pn-gradient-loop {
    background: linear-gradient(
        120deg,
        #00D4A1,
        #00A67E,
        #00FFB3,
        #00D4A1
    );

    background-size: 300% 300%;
    
    -webkit-background-clip: text;
    background-clip: text;
    
    -webkit-text-fill-color: transparent;
    color: transparent;

    display: inline-block;

    animation: pnGradientFlow 4s ease infinite;
}

/* Smooth Infinite Gradient Movement */
@keyframes pnGradientFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Optional Hover Enhancement */
.pn-gradient-loop:hover {
    animation-duration: 2s;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-63f1762 *//* LIVE DOT */

.live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#fff;
    display:inline-block;
    animation:pulse 1.2s ease-in-out infinite;
}

/* BLINK / PULSE EFFECT */

@keyframes pulse{

    0%{
        opacity:1;
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(255,255,255,0.7);
    }

    50%{
        opacity:.4;
        transform:scale(.7);
        box-shadow:0 0 0 6px rgba(255,255,255,0);
    }

    100%{
        opacity:1;
        transform:scale(1);
        box-shadow:0 0 0 0 rgba(255,255,255,0);
    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-22df85f *//* ==================================================
   PixelNest Process Steps
   2 Column Mobile Layout + Arrow Flow
================================================== */

.pnx-process-wrapper{
    width:100%;
    position:relative;
}

.pnx-process-steps{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    width:100%;
}

/* =========================================
   Item
========================================= */

.pnx-step-item{
    flex:1;
    min-width:0;
    position:relative;
}

/* =========================================
   Top
========================================= */

.pnx-step-top{
    display:flex;
    align-items:center;
    width:100%;
    margin-bottom:22px;
}

/* =========================================
   Circle
========================================= */

.pnx-step-circle{

    width:78px;
    height:78px;
    min-width:78px;

    border-radius:100px;

    border:1px solid rgba(0,212,161,0.18);

    background:rgba(0,212,161,0.02);

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

    color:#00D4A1;

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

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        color .35s ease;
}

/* Hover */

.pnx-step-item:hover .pnx-step-circle{

    background:linear-gradient(
        135deg,
        #00D4A1 0%,
        #00A67E 100%
    );

    color:#08110F;

    border-color:transparent;

    transform:translateY(-3px);

    box-shadow:
    0 0 18px rgba(0,212,161,0.22),
    0 0 40px rgba(0,212,161,0.08);
}

/* =========================================
   Desktop Line
========================================= */

.pnx-step-line{

    flex:1;

    height:1px;

    margin-left:18px;

    background:linear-gradient(
        90deg,
        rgba(0,212,161,0.55) 0%,
        rgba(0,166,126,0.08) 100%
    );
}

/* =========================================
   Content
========================================= */

.pnx-step-content{

    width:100%;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

/* Title */

.pnx-step-content h3{

    margin:0 0 10px;

    color:#FFFFFF;

    font-size:18px;
    font-weight:600;
    line-height:1.4;
}

/* Paragraph */

.pnx-step-content p{

    margin:0;

    max-width:190px;

    color:rgba(255,255,255,0.62);

    font-size:13px;
    font-weight:500;
    line-height:1.8;
}

/* ==================================================
   Tablet
================================================== */

@media(max-width:1024px){

    .pnx-process-steps{
        gap:18px;
    }

    .pnx-step-circle{

        width:64px;
        height:64px;
        min-width:64px;

        font-size:24px;
    }

    .pnx-step-content p{

        max-width:160px;

        font-size:12px;
    }

}

/* ==================================================
   Mobile 2 Column Layout
================================================== */

@media(max-width:767px){

    .pnx-process-steps{

        display:grid;

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

        gap:28px 18px;
    }

    .pnx-step-item{

        width:100%;

        display:flex;
        flex-direction:column;
        align-items:center;

        position:relative;
    }

    /* Hide desktop line */

    .pnx-step-line{
        display:none;
    }

    .pnx-step-top{

        width:100%;

        justify-content:center;

        margin-bottom:14px;
    }

    .pnx-step-circle{

        width:60px;
        height:60px;
        min-width:60px;

        font-size:22px;
    }

    .pnx-step-content{

        align-items:center;

        text-align:center;
    }

    .pnx-step-content h3{

        font-size:16px;

        margin-bottom:6px;
    }

    .pnx-step-content p{

        max-width:150px;

        font-size:12px;

        line-height:1.7;
    }

    /* =====================================
       Arrow
    ===================================== */

    .pnx-step-item::after{

        content:"➜";

        position:absolute;

        top:22px;
        right:-14px;

        color:#00D4A1;

        font-size:18px;

        opacity:.7;
    }

    /* Remove Arrow Right Side */

    .pnx-step-item:nth-child(2)::after,
    .pnx-step-item:nth-child(4)::after,
    .pnx-step-item:last-child::after{

        display:none;
    }

}/* End custom CSS */