@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Yeseva One", "Poppins", serif;
    margin: 0 auto;
    max-width: 1280px;
}

/* Common Style  */
.section-title {
    font-family: Poppins;
    font-size: 48px;
    font-weight: 700;
    line-height: 70px;
}

.caption {
    color: rgb(62, 62, 62);
    font-family: Poppins;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    padding: 15px 0;
}

.btn {
    color: rgb(255, 255, 255);
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    border: none;
    padding: 12px 25px 12px 25px;
    border-radius: 5px;
    background: rgb(255, 89, 89);
}

/* Hero Section Style  */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-around;

}

.hero-text {
    padding-top: 90px;
}

.hero-title {
    font-size: 60px;
    font-weight: 400;
    line-height: 80px;
}

.hero-title span {
    color: rgb(255, 173, 90);
}

.hero-img {
    width: 426px;
    height: 426px;
}

.hero-img1 {
    width: 100%;
    height: auto;
}

/* My Mission in 2025 section style  */
.mission{
    margin: 100px 0;
    align-items: center;
    
}
.mission h2 {
    padding-bottom: 30px;
    text-align: center;

}

.section-title span {
    color: rgb(255, 173, 90);
}

.mission-hole-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.mission-card {
    width: 320px;
    height: 310px;
    border-radius: 26px;
    padding: 20px;

}

.mission-card img {
    width: 50%;
    height: auto;
    padding-bottom: 10px;
}

.card-cap {
    font-size: 16px;
}

.card1 {
    background: rgba(79, 157, 166, 0.1);
}

.card2 {
    background: rgba(255, 89, 89, 0.1);
}

.card3 {
    background: rgb(255, 244, 214);
}
/* Development Section style  */
.development{
    margin: 100px 0;
    
}
.development h3{
    text-align: center;
    padding-bottom: 30px;
    color: rgb(255, 173, 90);
}
.dev-box{
    display: flex;
    padding-bottom: 80px;

}
.dev-box-img img{
    width: 400px;
height: 400px;
}
.dev-box{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-image: url(../images/shapes/shape-1.1.png);
    background-repeat: no-repeat;
    background-position: left 0px top 60px;

}
.box2{
    background-image: url(../images/shapes/shape-1.1.png);
    background-repeat: no-repeat;
    background-position: right 0px bottom 20px;
}
.dev-box-title{
    color: rgb(51, 51, 51);
font-family: Poppins;
font-size: 36px;
font-weight: 700;
line-height: 54px;
}
.box2{
    flex-direction: row-reverse;
}
/* Build Corona Application style  */
.app{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-image: url(../images/shapes/shape-2.png);
    background-repeat: no-repeat;
    background-position:  top 0px left 240px ;
    
}
.app-title{
    text-align: center;
    padding-bottom: 40px;
}
.app-img{
    background-image: url(../images/shapes/shape-3.png);
    background-repeat: no-repeat;
    background-position: left 10px bottom 10px;
}
.app-img img{
    width: 300px;
height: 500px;
}
/* Footer section style  */
footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
    height: 177px;
background: rgb(11, 13, 23);
text-align: center;
}
.footer h2 span{
    color: rgb(255, 89, 89);
}
.footer-title{
    font-family: Poppins;
font-size: 36px;
font-weight: 700;
color: white;
}
.footer-caption{
    color: rgb(217, 219, 225);
font-family: Manrope;
font-size: 14px;
font-weight: 400;
}

/* Small Device  */
@media screen and (max-width:576px) {
    .hero {
        flex-direction: column-reverse;
        padding: 0 60px;
    }
    .mission-hole-card{
        display: grid;

    }
    .dev-box, .app{
        margin: 0 50px;
    display: grid;
    gap: 30px;
    background-image: none;
    }
    
}
/* Medium Device  */
@media screen and (min-width:577px) and (max-width:992px) {
    .hero {
        flex-direction: column-reverse;
        
    }
    .mission-hole-card{
        display: grid;
    grid-template-columns: auto auto;
    margin: 0 70px;

    }
    .dev-box, .app{
        margin: 0 50px;
    display: grid;
    gap: 30px;
    background-image: none;
    }
}