@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@1,300&display=swap');


html{
    scroll-behavior: smooth;
}

body{
    font-family: "Ubuntu";
}



.hero{
    background: linear-gradient(252.46deg, #D8FBFC 0%, #F5E9C7 48.96%, #D8FBFC 100%);
    /* width: 1366px; */
    height: 699px;
    z-index: 2;
}

.btn{
    border-radius: 16px;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
  }

.voutchers {
    background-color: #fff;
    border: none;
    border-radius: 20px;
    width: 264px;
    height: 56px;
    box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.04);
    overflow: hidden
}

.voutcher-left {
    width: 80%;
    padding-top: 16px;
}

.voutcher-name {
    color: #969696;
    font-size: 14px;
    font-weight: 500;
    bottom: 5px;
}

.rec-color{
    width: 24px;
    height: 24px;
    background: #099396;
    box-shadow: 0px 5px 15px rgba(9, 147, 150, 0.25);
    border-radius: 8px;
    margin-left: 24px;
    margin-top: -24px;
}

.rec-color-yellow{
    width: 24px;
    height: 24px;
    margin-left: 24px;
    margin-top: -24px;
    background: #EEC049;
    box-shadow: 0px 5px 15px rgba(238, 192, 73, 0.25);
    border-radius: 8px;
    
}

.rec-color-orange{
    width: 24px;
    height: 24px;
    margin-left: 24px;
    margin-top: -24px;
    background: #F26440;
    box-shadow: 0px 5px 15px rgba(242, 100, 64, 0.25);
    border-radius: 8px;
    
}


.moto{
font-family: "Ubuntu";
font-style: normal;
font-weight: bold;
font-size: 24px;
color: #099396;
margin-top: 60px;
}

.desc{
margin-top: 8px;
font-family: "Ubuntu";
font-style: italic;
font-weight: 400;
font-size: 14px;
color: #333333;
}

/* image animation up down */
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
.vert-move {
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 1s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}

/* end animation updown */


#myawesomeservice{
height: 500px;
left: 0px;
top: 695px;
background: #EEFFF5;
}

.cardawesome {
    background-color: #fff;
    border: none;
    border-radius: 20px;
    width: 460px;
    height: 100px;
    box-shadow: 0px 6px 32px rgba(0, 0, 0, 0.04);
    overflow: hidden
}

.cardawesome-name {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    color: #333333;
    
}

.undertittle-name {
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    color: #969696;

}


.undertitle-left {
    margin-left: -4px;
    margin-top: 4px;
}


#work{
    height: 632px;
    background: linear-gradient(252.46deg, #D8FBFC 0%, #F5E9C7 48.96%, #D8FBFC 100%);
}

#footer{
    height: 676px;
    background: #EEFFF5;
}



/*untuk layar device berukuran kecil*/
/* ##Device = Most of the Smartphones Mobiles (Portrait) */
/* ##Screen = B/w 320px to 479px */


@media (min-width: 320px) and (max-width: 480px) {

.hero{
    height: 1340px;
}
#herosection{
    margin-top: 430px;
    margin-bottom: 600px;
}

#hero1{
    margin-top: 450px;
}

#photoprimary{
    margin-top: -1200px;   
    /* margin-bottom: 20px; */
}

#linkedinimg{
    margin-top: -380px;
    margin-left: -540px;
}

#googleimg{
    margin-top: -60px;
    margin-left: -375px;
}

#igimg{
    margin-top: 42px;
    margin-left: -530px;
}


#cardskill{
    margin-top: 40px;
}

#uxdesign{
    margin-left: -24px;
}


#myawesomeservice{
    height: 1000px;
    /* margin-bottom: 500px; */
}

.cardawesome-name{
    font-size: 18px;
    margin-left: 54px;
}

.undertittle-name{
    font-size: 14px;
    margin-left: 80px;
}

#awesomeui{
    margin-top: 8px;
}

#awesomeux{
    margin-top: 8px;
}

#namefrontend{
    margin-top: 8px;
    margin-left: 10px;
    margin-right: -20px;
}

#udertitel{
    margin-left: 82px;
}

#titelimplement{
    margin-left: -4px;
}

#work{
    height: 760px;
    /* margin-bottom: 800px; */
}

#footer{
    height: 1020px;
}

#rizal{
    
    margin-top: 36px;
    margin-bottom: 40px;
    text-align:center;
    display: block;
  /* margin: 0 auto; */
}

}