/*==================================================
        DDS PREMIUM CALL TO ACTION CSS - PART 1
        FINAL DESKTOP ALIGNMENT + GLASS UI
==================================================*/


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

#dds-call{

    position:relative;

    padding:120px 0;

    background:
    radial-gradient(circle at top left,
    rgba(253,185,19,.10),
    transparent 35%),
    #050505;

    overflow:hidden;

}



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


#dds-call::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-250px;
    top:-200px;

    border-radius:50%;

    background:rgba(253,185,19,.12);

    filter:blur(120px);

}



#dds-call::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    right:-220px;
    bottom:-200px;

    border-radius:50%;

    background:rgba(253,185,19,.08);

    filter:blur(120px);

}



/*==============================
        CONTAINER
==============================*/


.dds-call-container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 25px;

    position:relative;

    z-index:2;

}



/*==============================
        MAIN CTA BOX
==============================*/


.dds-call-box{

    position:relative;


    display:grid;


    grid-template-columns:

    minmax(550px,1fr)

    minmax(420px,.8fr);



    align-items:center;


    gap:60px;


    padding:75px 80px;


    background:

    rgba(20,20,20,.88);



    border-radius:35px;


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



    backdrop-filter:blur(20px);



    box-shadow:

    0 35px 90px rgba(0,0,0,.55);



}



/* GOLD TOP LINE */


.dds-call-box::before{


    content:"";

    position:absolute;


    top:0;

    left:5%;


    width:90%;

    height:4px;



    background:

    linear-gradient(

    90deg,

    transparent,

    #fdb913,

    #ffe27a,

    #fdb913,

    transparent

    );


}




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


.dds-call-content{


    display:flex;

    flex-direction:column;


    justify-content:center;


}



/* TAG */


.dds-call-tag{


    display:flex;

    align-items:center;


    gap:12px;


    width:max-content;



    padding:12px 25px;


    margin-bottom:30px;



    border-radius:50px;


    background:

    rgba(253,185,19,.12);



    border:

    1px solid rgba(253,185,19,.35);



    color:#fdb913;


    font-size:14px;


    font-weight:700;


    letter-spacing:2px;


}




.dds-call-tag i{


    font-size:20px;

}




/* TITLE */


.dds-call-content h2{


    color:#fff;


    font-size:52px;


    line-height:1.2;


    font-weight:750;


    margin-bottom:25px;


}





.dds-call-content p{


    color:#cfcfcf;


    font-size:18px;


    line-height:34px;


    max-width:650px;


    margin-bottom:40px;


}



/*==============================
        STATS
==============================*/


.dds-stats{


    display:flex;


    gap:20px;


    margin-bottom:40px;


}



.dds-stat{


    flex:1;


    min-height:120px;


    padding:25px 15px;


    text-align:center;


    background:#111;


    border-radius:20px;


    border:

    1px solid rgba(253,185,19,.15);



    transition:.4s;


}



.dds-stat:hover{


    transform:translateY(-8px);


    border-color:#fdb913;


}




.dds-stat h3{


    color:#fdb913;


    font-size:38px;


    margin-bottom:8px;


}



.dds-stat p{


    margin:0;


    font-size:15px;


    line-height:20px;


}





/*==============================
        CONTACT LIST
==============================*/


.dds-contact-list{


    display:flex;


    flex-direction:column;


    gap:15px;


    margin-bottom:40px;


}




.dds-contact-item{


    display:flex;


    align-items:center;


    gap:20px;


    padding:15px 30px;


    background:#111;


    border-radius:18px;


    border:

    1px solid rgba(255,255,255,.06);


    transition:.4s;


}



.dds-contact-item:hover{


    transform:translateX(8px);


    border-color:#fdb913;


}




/*==============================
        CONTACT ICON FIX
==============================*/

.dds-contact-item .dds-icon{

    width:55px;

    height:55px;

    min-width:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fdb913;

    color:#111;

    font-size:20px;

    flex-shrink:0;

}


.dds-contact-item .dds-icon i{

    width:auto;

    height:auto;

    background:none;

    color:#111;

    font-size:20px;

}


.dds-contact-item span{


    color:#fff;


    font-size:17px;


    line-height:28px;


}



/*==============================
        BUTTONS
==============================*/


.dds-call-buttons{


    display:flex;


    gap:20px;


}



.dds-btn1,
.dds-btn2{


    width:200px;


    height:58px;


    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:50px;


    font-weight:700;


    text-decoration:none;


    transition:.4s;


}




.dds-btn1{


background:#fdb913;

color:#111;


}



.dds-btn2{


border:2px solid #fdb913;

color:#fdb913;


}



.dds-btn1:hover,
.dds-btn2:hover{


transform:translateY(-6px);


}
/*==================================================
        DDS PREMIUM CALL TO ACTION CSS - PART 2
        ENGINEER ANIMATION + RESPONSIVE FIX
==================================================*/


/*==============================
        RIGHT SIDE WRAPPER
==============================*/

.dds-call-right{

    position:relative;

    min-height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

}



/*==============================
        ENGINEER MAIN
==============================*/

.dds-engineer{


    position:relative;


    width:380px;


    height:380px;


    display:flex;


    align-items:center;


    justify-content:center;


    z-index:5;


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


}



.dds-engineer::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    border-radius:50%;


    background:

    radial-gradient(

    circle,

    rgba(253,185,19,.25),

    transparent 70%

    );


    filter:blur(15px);


    animation:

    ddsGlow 4s infinite alternate;


}




/*==============================
        MAIN CIRCLE
==============================*/


.dds-main-circle{


    position:absolute;


    width:310px;


    height:310px;


    border-radius:50%;


    border:

    3px dashed rgba(253,185,19,.5);



    animation:

    ddsRotate 20s linear infinite;


}



.dds-main-circle::before{


    content:"";


    position:absolute;


    inset:20px;


    border-radius:50%;


    border:

    1px solid rgba(255,255,255,.15);


}



/*==============================
        ENGINEER ICON
==============================*/


.dds-engineer i{


    position:relative;


    z-index:5;


    font-size:150px;


    color:#fdb913;


    filter:

    drop-shadow(

    0 0 30px rgba(253,185,19,.8)

    );


    animation:

    ddsEngineerIcon 3s infinite;


}




/*==============================
        GEARS
==============================*/


.dds-gear{


    position:absolute;


    color:#fdb913;


    z-index:6;


}



.dds-gear i{


    font-size:55px;


    filter:

    drop-shadow(

    0 0 15px rgba(253,185,19,.5)

    );


}



.gear1{


    top:50px;


    right:40px;


    animation:

    ddsRotate 8s linear infinite;


}



.gear2{


    bottom:60px;


    left:45px;


    animation:

    ddsRotateReverse 8s linear infinite;


}



.gear3{


    top:45%;


    right:0;


    animation:

    ddsRotate 10s linear infinite;


}




/*==============================
        TOOLS
==============================*/


.dds-tool{


    position:absolute;


    color:white;


    font-size:35px;


    z-index:7;


    text-shadow:

    0 0 15px #fdb913;


}



.hammer{


    top:40px;


    left:50%;


    animation:

    ddsHammer 2s infinite;


}



.ruler{


    right:20px;


    top:50%;


    animation:

    ddsSwing 4s infinite;


}



.screwdriver{


    bottom:45px;


    left:20px;


    animation:

    ddsBounce 3s infinite;


}




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


.dds-badge{


    position:absolute;


    top:60px;


    left:20px;


    padding:18px;


    width:120px;


    text-align:center;


    border-radius:20px;


    background:#111;


    border:

    1px solid #fdb913;


    z-index:10;


}



.dds-badge h3{


    color:#fdb913;


    font-size:32px;


    margin:0;


}



.dds-badge span{


    color:#fff;


    font-size:12px;


}





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


.dds-map-card{


    position:absolute;


    bottom:45px;


    right:20px;


    width:200px;


    padding:20px;


    text-align:center;


    background:#111;


    border-radius:20px;


    border:

    1px solid rgba(253,185,19,.5);


    z-index:10;


}



.dds-map-card i{


    font-size:35px;


    color:#fdb913;


}



.dds-map-card h4{


    color:#fff;


    margin:10px 0 5px;


}



.dds-map-card p{


    color:#aaa;


    font-size:14px;


}





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


.dds-btn1,
.dds-btn2{


    position:relative;

    overflow:hidden;


}



.dds-btn1::after,
.dds-btn2::after{


    content:"";


    position:absolute;


    width:50%;


    height:100%;


    left:-100%;


    top:0;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.6),

    transparent

    );


    transform:skewX(-25deg);


}



.dds-btn1:hover::after,
.dds-btn2:hover::after{


    left:150%;


    transition:.8s;


}





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


@keyframes ddsEngineerFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}

}



@keyframes ddsEngineerIcon{


0%,100%{

transform:scale(1);

}


50%{

transform:scale(1.08);

}

}



@keyframes ddsRotate{


from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}



@keyframes ddsRotateReverse{


from{

transform:rotate(360deg);

}

to{

transform:rotate(0);

}

}



@keyframes ddsHammer{


0%,100%{

transform:rotate(-25deg);

}


50%{

transform:rotate(25deg);

}

}



@keyframes ddsSwing{


0%,100%{

transform:rotate(-15deg);

}


50%{

transform:rotate(15deg);

}

}



@keyframes ddsBounce{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}

}



@keyframes ddsGlow{


from{

opacity:.4;

transform:scale(1);

}


to{

opacity:1;

transform:scale(1.15);

}

}





/*==================================================
        DESKTOP FIX
==================================================*/


@media(min-width:1200px){


.dds-call-box{

    min-height:650px;

}


.dds-call-right{

    transform:translateX(20px);

}



}




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


@media(max-width:1100px){


.dds-call-box{


grid-template-columns:1fr;


text-align:center;


}



.dds-call-content{


align-items:center;


}



.dds-call-buttons{


justify-content:center;


}



.dds-call-right{


min-height:420px;


}



}




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


@media(max-width:768px){


.dds-call-box{


padding:40px 25px;


}



.dds-call-content h2{


font-size:30px;


}



.dds-stats{


flex-direction:column;


width:100%;


}



.dds-contact-item{


flex-direction:column;


text-align:center;


}



.dds-call-buttons{


flex-direction:column;


width:100%;


}



.dds-btn1,
.dds-btn2{


width:100%;


}



.dds-call-right{


min-height:330px;


}



.dds-engineer{


width:250px;

height:250px;


}



.dds-main-circle{


width:200px;

height:200px;


}



.dds-engineer i{


font-size:90px;


}



.dds-badge{


left:0;

top:20px;


}



.dds-map-card{


right:0;

bottom:20px;


width:160px;


}



}



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

/*==================================================
        EXTRA SMALL MOBILE FIX
        480px BELOW
==================================================*/

@media(max-width:480px){


#dds-call{

    padding:70px 0;

}


/* MAIN BOX */

.dds-call-box{

    padding:35px 18px;

    border-radius:25px;

    gap:30px;

}


/* TITLE */

.dds-call-content h2{

    font-size:24px;

    line-height:1.35;

}


.dds-call-content p{

    font-size:15px;

    line-height:26px;

}



/* TAG */

.dds-call-tag{

    font-size:11px;

    letter-spacing:1px;

    padding:10px 15px;

}



/* STATS */

.dds-stats{

    flex-direction:column;

    gap:15px;

}


.dds-stat{

    min-height:auto;

    padding:20px;

}


.dds-stat h3{

    font-size:32px;

}


.dds-stat p{

    font-size:14px;

}



/* CONTACT */

.dds-contact-list{

    gap:12px;

}



.dds-contact-item{

    flex-direction:row;

    text-align:left;

    padding:14px;

    gap:12px;

}



.dds-contact-item .dds-icon{

    width:45px;

    height:45px;

    min-width:45px;

    font-size:16px;

}



.dds-contact-item span{

    font-size:14px;

    line-height:22px;

}



/* BUTTON */

.dds-call-buttons{

    gap:15px;

}



.dds-btn1,
.dds-btn2{

    height:52px;

    font-size:14px;

}



/* RIGHT AREA */


.dds-call-right{

    min-height:300px;

    width:100%;

    transform:none;

    overflow:hidden;

}



/* ENGINEER */

.dds-engineer{

    width:210px;

    height:210px;

}



.dds-engineer::before{

    width:220px;

    height:220px;

}



.dds-main-circle{

    width:190px;

    height:190px;

}



.dds-engineer i{

    font-size:75px;

}



/* GEARS */

.dds-gear i{

    font-size:35px;

}


.gear1{

    top:20px;

    right:20px;

}


.gear2{

    bottom:30px;

    left:20px;

}


.gear3{

    right:5px;

}


/* TOOLS */

.dds-tool{

    font-size:25px;

}



.hammer{

    top:15px;

}


.ruler{

    right:0;

}


.screwdriver{

    bottom:20px;

    left:5px;

}


/* REMOVE FLOATING CARDS */

.dds-map-card,
.dds-badge{

    display:none;

}



}