/*============================

STARTUP PRO

============================*/

.startup-pro{

    padding:60px 8%;

    background:linear-gradient(135deg,#ffffff,#faf7f1);

    position:relative;

    overflow:hidden;

}

.startup-pattern{

    position:absolute;

    width:900px;

    height:900px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(198,169,107,.13),
    transparent 70%);

    right:-300px;

    top:-250px;

}

.startup-pro .container{

    max-width:1450px;

    margin:auto;

    position:relative;

}



/*====================

HEADER

====================*/

.startup-head{

    text-align:center;

    max-width:900px;

    margin:auto;

    margin-bottom:80px;

}

.startup-badge{

    display:inline-block;

    padding:12px 26px;

    background:#11402c;

    color:#fff;

    border-radius:40px;

    letter-spacing:2px;

    font-size:13px;

    font-weight:bold;

}

.startup-head h2{

    margin-top:25px;

    font-size:52px;

    color:#222;

}

.startup-head h2 span{

    color:#c6a96b;

}

.startup-head p{

    margin-top:20px;

    color:#666;

    line-height:2;

    font-size:18px;

}



/*====================

LAYOUT

====================*/

.startup-wrapper{

    display:grid;

    grid-template-columns:470px 1fr;

    gap:60px;

    align-items:start;

}



/*====================

IMAGE

====================*/

.startup-image{

    position:sticky;

    top:100px;

}

.startup-image img{

    width:100%;

    display:block;

    border-radius:35px;

    box-shadow:

            0 40px 90px rgba(0,0,0,.18);

    transition:.5s;

}

.startup-image:hover img{

    transform:scale(1.03);

}



/*====================

EXPERIENCE

====================*/

.experience-card{

    position:absolute;

    bottom:25px;

    right:-20px;

    width:170px;

    padding:25px;

    border-radius:25px;

    background:#fff;

    box-shadow:0 25px 55px rgba(0,0,0,.15);

    text-align:center;

}

.experience-card strong{

    display:block;

    font-size:44px;

    color:#11402c;

}

.experience-card span{

    color:#777;

}



/*====================

FLOAT CARD

====================*/

.floating-card{

    position:absolute;

    top:35px;

    left:-25px;

    width:240px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

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

    backdrop-filter:blur(20px);

    border-radius:22px;

    box-shadow:0 25px 50px rgba(0,0,0,.12);

    animation:floatCard 5s ease-in-out infinite;

}

.floating-card i{

    width:65px;

    height:65px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#11402c;

    color:#d9bb73;

    font-size:28px;

}

.floating-card h4{

    margin:0;

    font-size:20px;

    color:#222;

}

.floating-card p{

    margin-top:6px;

    color:#777;

}



/*====================

GRID

====================*/

.startup-services-grid{

    display:grid;

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

    gap:28px;

}
/*====================================

SERVICE BOX

=====================================*/

.service-box{

    position:relative;

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

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(198,169,107,.18);

    border-radius:30px;

    padding:35px;

    overflow:hidden;

    transition:.45s;

    box-shadow:

            0 15px 40px rgba(0,0,0,.08);

}


/*======================

TOP

=======================*/

.service-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}

.service-number{

    width:55px;

    height:55px;

    border-radius:50%;

    background:#11402c;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:bold;

    font-size:17px;

    transition:.4s;

}

.service-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(

            135deg,

            #faf6ef,

            #fff

    );

    color:#c6a96b;

    font-size:34px;

    transition:.45s;

    box-shadow:

            inset 0 0 25px rgba(198,169,107,.12);

}



/*======================

HOVER

=======================*/

.service-box:hover .service-icon{

    transform:rotate(12deg) scale(1.12);

    background:#c6a96b;

    color:#fff;

}

.service-box:hover .service-number{

    transform:scale(1.12);

    background:#c6a96b;

}



/*======================

TEXT

=======================*/

.service-box h3{

    font-size:26px;

    color:#222;

    margin-bottom:18px;

    line-height:1.5;

}

.service-box p{

    color:#666;

    line-height:2.1;

    font-size:15px;

    margin-bottom:28px;

}



/*======================

BUTTON

=======================*/

.service-box a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#11402c;

    font-weight:700;

    transition:.35s;

}

.service-box a i{

    transition:.35s;

}


.service-box:hover a i{

    transform:translateX(-8px);

}

/*======================

LEFT BORDER

=======================*/

.service-box::after{

    content:"";

    position:absolute;

    left:0;

    top:40px;

    width:5px;

    height:70px;

    border-radius:10px;

    background:#c6a96b;

    transition:.35s;

}


.startup-action{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    min-height:340px;

    border-radius:35px;

    overflow:hidden;

    background:linear-gradient(135deg,#11402c,#1b5c42);

    box-shadow:

            0 35px 80px rgba(17,64,44,.28);

}

.startup-action::before{

    content:"";

    position:absolute;

    top:-120px;

    left:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

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

}

.startup-action::after{

    content:"";

    position:absolute;

    bottom:-140px;

    right:-120px;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(198,169,107,.18);

}

.startup-action h2{

    position:relative;

    color:#fff;

    font-size:38px;

    margin-bottom:18px;

    z-index:2;

}

.startup-action p{

    position:relative;

    color:#ddd;

    font-size:18px;

    line-height:2;

    margin-bottom:35px;

    z-index:2;

}

.startup-action a{

    position:relative;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    padding:18px 45px;

    border-radius:60px;

    background:#c6a96b;

    color:#fff;

    font-weight:700;

    transition:.35s;

    overflow:hidden;

    z-index:2;

}

.startup-action a::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.4),

            transparent

    );

}

.startup-action a:hover::before{

    animation:shineButton .8s linear;

}

.startup-action a:hover{

    background:#fff;

    color:#11402c;

    transform:translateY(-6px);

}

@keyframes shineButton{

    from{

        left:-120%;

    }

    to{

        left:130%;

    }

}



/*====================================

FLOAT

=====================================*/

.service-box{

    animation:serviceFloat 6s ease-in-out infinite;

}

.service-box:nth-child(2){

    animation-delay:.3s;

}

.service-box:nth-child(3){

    animation-delay:.6s;

}

.service-box:nth-child(4){

    animation-delay:.9s;

}

.service-box:nth-child(5){

    animation-delay:1.2s;

}

@keyframes serviceFloat{

    50%{

        transform:translateY(-8px);

    }

}



/*====================================

IMAGE FLOAT

=====================================*/

@keyframes floatCard{

    50%{

        transform:translateY(-12px);

    }

}



/*====================================

IMAGE HOVER

=====================================*/

.startup-image{

    overflow:visible;

}

.startup-image img{

    transition:.6s;

}

.startup-image:hover img{

    transform:scale(1.05) rotate(-1deg);

}



/*====================================

RESPONSIVE

=====================================*/

@media(max-width:1200px){

    .startup-wrapper{

        grid-template-columns:1fr;

    }

    .startup-image{

        position:relative;

        top:0;

        max-width:650px;

        margin:auto;

        margin-bottom:50px;

    }

}

@media(max-width:900px){

    .startup-services-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .startup-pro{

        padding:80px 6%;

    }

    .startup-head h2{

        font-size:34px;

    }

    .service-box{

        padding:28px;

    }

    .service-icon{

        width:65px;

        height:65px;

        font-size:28px;

    }

    .service-box h3{

        font-size:22px;

    }

    .startup-action{

        min-height:280px;

        padding:30px;

    }

    .startup-action h2{

        font-size:28px;

    }

    .experience-card{

        width:140px;

        right:10px;

        bottom:10px;

    }

    .floating-card{

        left:10px;

        width:200px;

        padding:15px;

    }

}
.startup-pro::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

            linear-gradient(rgba(198,169,107,.05) 1px,transparent 1px),

            linear-gradient(90deg,rgba(198,169,107,.05) 1px,transparent 1px);

    background-size:70px 70px;

    pointer-events:none;

}
.service-box{

    overflow:hidden;

}

.service-box::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    background:radial-gradient(circle,
    rgba(198,169,107,.25),
    transparent 70%);

    top:-120px;

    left:-120px;

    transition:.5s;

    opacity:0;

}

.service-box:hover::before{

    opacity:1;

    transform:scale(2);

}
.service-box::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:#c6a96b;

    transition:.45s;

}

.service-box:hover::after{

    width:100%;

}
.service-box a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:#11402c;

    color:#fff;

    transition:.35s;

}

.service-box:hover a{

    background:#c6a96b;

    color:#fff;

}

.service-box a i{

    transition:.35s;

}

.service-box:hover a i{

    transform:translateX(-8px);

}
.service-icon{

    position:relative;

}

.service-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px dashed rgba(198,169,107,.35);

    animation:rotateRing 18s linear infinite;

}

@keyframes rotateRing{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
.service-box{

    transform-style:preserve-3d;

    perspective:1000px;

}

.service-box:hover{

    transform:

            perspective(1000px)

            rotateX(4deg)

            rotateY(-4deg)

            translateY(-12px);

}
.startup-image::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(circle,

    rgba(198,169,107,.35),

    transparent 70%);

    left:50%;

    top:50%;

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

    z-index:-1;

    animation:glowMove 6s infinite;

}

@keyframes glowMove{

    50%{

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

    }

}
.floating-card{

    backdrop-filter:blur(25px);

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

}
.service-icon{

    background:

            linear-gradient(

                    145deg,

                    #ffffff,

                    #f6efe2

            );

    box-shadow:

            inset 0 0 20px rgba(198,169,107,.15),

            0 10px 30px rgba(0,0,0,.08);

}
.service-box{

    animation:fadeUp .9s both;

}

.service-box:nth-child(1){

    animation-delay:.1s;

}

.service-box:nth-child(2){

    animation-delay:.2s;

}

.service-box:nth-child(3){

    animation-delay:.3s;

}

.service-box:nth-child(4){

    animation-delay:.4s;

}

.service-box:nth-child(5){

    animation-delay:.5s;

}

.service-box:nth-child(6){

    animation-delay:.6s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(70px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}