*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    max-width: 1440px;
    background-color: #FFFFFF;
    margin: auto;
    position: relative;
}

/* header & hero section in container  */
.container
{
    display: flex;
    flex-direction:column;
    height: 780px;
    background: #FFFCF5;
}

/* header section start */
header
{
    width: 1170px;
    height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:28px auto 0;
}


header .logo
{
    width: 100px;
    height: 30px;
}

header nav
{
    display: flex;
    justify-content: space-evenly;
    width: 421px;
    height: 28px;
}

header nav a
{
    text-decoration: none;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #6A6E78;
}

header nav .active{color: #3936C4;}

/* mobile & tab */
.sm-nav-cont{display: none;}

header .button
{
    display: flex;
    justify-content: space-between;
    width: 220px;
}

header .button button
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #212832;
    outline: none;
    background: none;
}

header .button button:last-child
{
    width: 121px;
    height: 54px;
    border: 1.2px solid #E1E5E8;
    border-radius: 6px;
}

header .button button:first-child{border: none;}

/* hero section start */
.hero 
{
    display: flex;
    justify-content: space-between;
    width: 1170px;
    margin: auto;
}

.hero .content
{
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 570px;
   height: 508.51px;
}

.hero .content h1 
{
    width: 500px;
    height: 160px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 70px;
    line-height: 80px;
    color: #21202A;
}

.hero .content p 
{
    width: 504px;
    height: 60px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #545360;
    margin: 28px 0 36px;
}

.hero .content button
{
    width: 170px;
    height: 60px;
    background: #3936C4;
    border-radius: 8px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    border: none;
    text-align: center;
    color: #FFFFFF;
}

.hero .image
{
    width: 600px;
    height: 508.51px;
}

.hero .image img 
{
    width: 100%;
    height: 100%;
}
/* end container */

/* start company section */
.company
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.company h3 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    color: #21202A;
    margin: 100px 0 38px;
}

.company .comp-log
{
    display: flex;
    justify-content: space-evenly;
    width: 840px;
    margin-bottom: 180px;
}

.company .comp-log img:first-child
{
    width: 160px;
    height: 26px;
}

.company .comp-log img:nth-child(4)
{
    width: 100px;
    height: 26px;
}

.company .comp-log img:nth-child(3)
{
    width: 123px;
    height: 26px;
}

.company .comp-log img:nth-child(2)
{
    width: 96px;
    height: 26px;
}

.company .comp-log img:nth-child(1)
{
    width: 117px;
    height: 26px;
}
/* end company section */

/* start work section */
.work
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.work .cont h3 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    text-align: center;
    color: #21202A;
}

.work .cont p 
{
    width: 470px;
    height: 56px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #545360;
}

.work .profile
{
    display: flex;
    width: 1170px;
    justify-content: space-between;
    margin-top: 70px;
    margin-bottom: 180px;
}

.work .profile .card
{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 370px;
    height: 382px;
    border: 1px solid #E4E4ED;
    border-radius: 12px;
    padding-left: 28px;
}

.work .profile .card img 
{
    width: 80px;
    height: 80px;
}

.work .profile .card h4 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    color: #21202A;
    margin-top: 12px;
}

.work .profile .card p
{
    width: 314px;
    height: 84px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #545360;
}

.work .profile .card button
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #21202A;
    border: none;
    outline: none;
    background: none;
    text-align: left;
}

.work .profile .card:nth-child(2)
{
    box-shadow: 0px 16px 52px rgba(33, 32, 42, 0.08);
}

.work .profile .card:nth-child(2) button
{
    color: #3936C4;
}
/* end work section */

/* start job section */
.job
{
    display: flex;
    justify-content: space-between;
    width: 1175px;
    margin: auto;
}

.job .content
{
    display: flex;
    flex-direction: column;
}

.job .content .child1{margin: 25px 0 30px;}

.job .content .child1 h2 
{
    width: 470px;
    height: 104px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 52px;
    color: #21202A;
    margin-bottom: 15px;
}

.job .content .child1 p 
{
    width: 470px;
    height: 84px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #545360;
}

.job .content .child2 .c2-cont
{
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.job .content .child2 .c2-cont img 
{
    width: 18px;
    height: 12px;
}

.job .content .child2 .c2-cont p 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    margin-left: 10px;
}

.job .content .child2 button
{
    width: 170px;
    height: 60px;
    background: #3936C4;
    border-radius: 8px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    color: #FFFFFF;
    border: none;
    outline: none;
    margin-top: 25px;
}

.job .images img
{
    width: 570px;
    height: 523px;
}
/* end job section */

/* start Feature section */
.feature
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.feature .content
{
    margin: 180px 0 50px;
}

.feature .content h2 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    text-align: center;
    color: #21202A;
}

.feature .content p 
{
    width: 470px;
    height: 56px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: #545360;
}

.parent-cont 
{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 1170px;
    height: 740px;
}

.c-container
{
    display: flex;
    justify-content: space-between;
}

.c-container .card 
{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 370px;
    height: 322px;
    background: #FFFFFF;
    border: 1px solid #E2E2EB;
    border-radius: 18px;
    padding-left: 22px;
}

.c-container .card h3 
{
    width: 326px;
    height: 68px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
    color: #21202A;
}

.c-container .card .location
{
    display: flex;
    align-items: center;
    margin-top: -15px;
}

.c-container .card .location img 
{
    width: 13px;
    height: 16px;
}

.c-container .card .location h4 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #545360;
    margin: 0 28px 0 6px;
}

.c-container .card .location button
{
    width: 92px;
    height: 36px;
    background: #FFF8F0;
    border-radius: 6px;
    border: none;
    outline: none;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #FF8100;
    margin-top: -1px;
}

.c-container .card .detail
{
    display: flex;
    align-items: center;
}

.c-container .card .detail img 
{
    width: 54px;
    height: 54px;
}

.c-container .card .detail .de-cont
{
    margin: 0 80px 0 22px;
}

.c-container .card .detail .de-cont h5 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #21202A;
    margin-bottom: 3px;
}

.c-container .card .detail .de-cont h6 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #545360;
}

.c-container .card .detail button
{
    width: 92px;
    height: 36px;
    background: #21202A;
    border-radius: 6px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    border: none;
    outline: none;
    text-align: center;
    color: #FFFFFF;
    margin-top: -2px;
}

.c-container .card .detail .diff
{
    background: #3936C4;
}

.feature button
{
    width: 170px;
    height: 60px;
    background: #21202A;
    border-radius: 8px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    border: none;
    outline: none;
    text-align: center;
    color: #FFFFFF;
    margin-top: 15px;
}
/* end Feature section */

/* start review section */
.review
{
    width: 1170px;
    margin: 180px auto 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.review .txt h2 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    color: #21202A;
    margin-bottom: 8px;
}

.review .txt p 
{
    width: 470px;
    height: 56px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #545360;
}

.review button
{
    width: 170px;
    height: 60px;
    background: #3936C4;
    border-radius: 8px;
    border: none;
    outline: none;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: #FFFFFF;
}
/* end review section */

/* start review text section */
.rev-txt
{
    width: 1170px;
    display: flex;
    justify-content: space-between;
    margin: auto;
}

.rev-txt .content 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 370px;
    height: 414px;
    background: #FFFFFF;
    border-radius: 12px;
    padding-left: 22px;
    margin-bottom: 230px;
}

.rev-txt .content:nth-child(2) 
{
    box-shadow: 0px 18px 46px rgba(33, 32, 42, 0.08);
}

.rev-txt .content img 
{
    width: 54px;
    height: 54px;
}

.rev-txt .content .star
{
    display: flex;
    gap: 7px;
}

.rev-txt .content .star img 
{
    width: 22px;
    height: 22px;
}

.rev-txt .content p 
{
    width: 326px;
    height: 112px;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: #545360;
    margin: 20px 0 35px;
}

.rev-txt .content h3 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    color: #21202A;
}

.rev-txt .content h4 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #545360;
}
/* end review text section */

/* start banner section */
.banner
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 1170px;
    height: 304px;
    background: #3936C4;
    border-radius: 12px;
    margin: auto;
    margin-bottom: 180px;
}

.banner h2 
{
    width: 650px;
    height: 104px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 52px;
    color: #FFFFFF;
}

.banner button 
{
    width: 240px;
    height: 60px;
    background: #FFFFFF;
    border-radius: 6px;
    border: none;
    outline: none;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: #3936C4;
}
/* end banner section  */

/* start footer section  */
footer
{
    max-width: 1440px;
    display: flex;
    flex-direction: column;
}
footer .rotate
{
    max-width: 1444px;
    height: 133px;
    background-color: white;
    margin-bottom: -64px;
    margin-left: -10px;
    transform: rotate(-5deg);
}


footer .image
{
    max-width: 1440px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 470px;
    background: #21202A;
    padding-top: 115px;
    gap: 40px;
}

footer .image .txt 
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1170px;
}

footer .image .txt h2 
{
    width: 571px;
    height: 104px;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 52px;
    color: #FFFFFF;
    position: relative;
}

footer .image .txt h2::after
{
    content: '';
    width: 192px;
    height: 2px;
    background-color: #FFFFFF;
    position: absolute;
    top: 100px;
    left: 112px;
}

footer .image .txt .search
{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 267px;
    height: 72px;
    background: #3936C4;
    border-radius: 6px;
}

footer .image .txt .search img 
{
    width: 16px;
    height: 16px;
}

footer .image .txt .search button
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
    background: none;
    border: none;
    outline: none;
}

footer .image .line 
{
    width: 1170px;
    height: 2px;
    background-color: #3E3C50;
}

footer .image .nav 
{
    width: 1170px;
    display: flex;
    justify-content: flex-end;
    gap: 30px;
}

footer .image .nav a 
{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    color: #B5BAC6;
}
/* end footer section  */

/* 1366px screen  */
@media screen and (max-width:1370px) {
    body{max-width: 1366px;}
    footer{max-width: 1366px;}
    footer .rotate{max-width: 1354px;margin-left: -8px;}
    footer .image{max-width: 1366px;height: 456px;}
    
}

/* 1024px screen */
@media screen and (max-width:1024px)
{
    body{max-width: 1024px;}
    .container{height: 700px;}
    header {width: 950px;}
    .hero{width: 950px;}
    .hero .content{width: 450px;height: 350px;}
    .hero .content h1{width: 380px;height: 120px; font-size: 50px;line-height: 55px;}
    .hero .content p{width: 395px;height: 90px;margin: 10px 0; font-size: 16px;line-height: 25px;}
    .hero .image{width: 500px;height: 400px;}
    .work .profile{width: 950px;}
    .work .profile .card{width: 300px;justify-content: space-evenly;}
    .work .profile .card h4{margin-top: 0px;}
    .work .profile .card p{width: 270px;height: auto;}
    .job{width: 950px;}
    .job .content{width: 425px;height: 425px;}
    .job .content .child1{margin: 15px 0 8px;}
    .job .content .child1 h2 {width: 390px;height: 90px;font-size: 34px;line-height: 45px;margin-bottom: 8px;}
    .job .content .child1 p {width: 400px;height: 80px;font-size: 16px;line-height: 22px;}
    .job .content .child2 .c2-cont {margin-bottom: 8px;}
    .job .images{width: 425px;height: 425px;}
    .job .images img{width: 100%;height: 100%;}
    .parent-cont{width: 950px;}
    .parent-cont .card{width: 300px;padding-left: 15px;}
    .c-container .card h3{width: 270px;font-size: 20px;}
    .c-container .card .detail .de-cont{margin: 0 20px 0 22px;}
    .review{width: 950px;}
    .rev-txt{width: 950px;}
    .rev-txt .content{width: 300px;}
    .rev-txt .content p{width: 270px;height: 150px; line-height: 25px;}
    .banner{width: 950px;}
    .banner h2{width: 600px;font-size: 40px;}
    footer{width: 1024px;}
    footer .rotate{width: 1029.5px;}
    footer .image{width: 1024px;}
    footer .image .txt{width: 950px;}
    footer .image .line{width: 950px;}
    footer .image .nav{width: 950px;}
    
}


/* tab 768px screen */
@media screen and (max-width:768px)
{
    body{max-width: 768px;}
    .container{height: 1000px;}
    header {width: 700px;}
    header nav {display: none;}
    .sm-nav-cont{display: flex;flex-direction: column;position: relative;}
    .sm-bar {font-size: 35px;}
    .sm-nav{width: 200px;height: 200px; background-color: whitesmoke;opacity: 90%; display: none;flex-direction: column;justify-content: space-evenly; align-items: center; position: absolute;top: 60px;left:-80px;}
    .sm-nav a { text-decoration: none;font-family: 'Poppins';font-style: normal;font-weight: 400; font-size: 16px;color: black;}
    header .button{width: 200px;}
    .hero{width: 700px;flex-direction: column;align-items: center;}
    .hero .content{width: auto;height: auto;align-items: center;}
    .hero .content h1{width: auto;height: 80px; font-size: 50px;line-height: 55px;}
    .hero .content p{width: auto;height: 70px;margin: 10px 0; font-size: 20px;line-height: 25px;text-align: center;}
    .hero .image{width: 500px;height: 400px;margin-top: 60px;}
    .company .comp-log{width: 700px;margin-bottom: 100px;}
    .work .profile{width: 700px;height: 1230px; flex-direction: column;align-items: center;margin-bottom: 100px;}
    .work .profile .card{width: 370px;height: 382px;justify-content: space-evenly;align-items: center;padding-left: 0;}
    .work .profile .card h4{margin-top: 0px;}
    .work .profile .card p{width: 314px;height: 84px;text-align: center;}
    .job{width: 700px;flex-direction: column;align-items: center;}
    .job .content{width: auto;height: auto;}
    .job .content .child1{margin: 15px 0 20px;}
    .job .content .child1 h2 {width: auto;height: auto;margin-bottom: 8px;text-align: center;}
    .job .content .child1 p {width: auto;height: auto;font-size: 16px;line-height: 22px;text-align: center;}
    .job .content .child2 {margin: auto;}
    .job .content .child2 .c2-cont {margin-bottom: 8px;}
    .job .content .child2 button{margin: 10px 0 50px 20px;}
    .job .images{width: 425px;height: 425px;}
    .job .images img{width: 100%;height: 100%;}
    .feature .content{margin-top: 100px;}
    .parent-cont{width: 700px;height: auto;align-items: center;}
    .parent-cont .c-container:first-child{margin-bottom: 30px;}
    .c-container{flex-direction: column;gap: 30px;}
    .c-container .card{width: 370px;padding-left: 15px;}
    .c-container .card h3{width: 326px;font-size: 24px;}
    .c-container .card .detail .de-cont{margin: 0 80px 0 22px;}
    .feature button{margin-top: 40px;}
    .review{width: 700px;margin-top: 100px;flex-direction: column;}
    .review .txt p{text-align: center;margin-bottom: 30px;}
    .rev-txt{width: 700px;flex-direction: column;align-items: center;}
    .rev-txt .content{width: 370px;margin-bottom: 30px;}
    .rev-txt .content p{width: 326px;height: 112px; line-height: 28px;}
    .banner{width: 700px;margin-top: 70px;padding: 0 18px; margin-bottom: 100px;}
    .banner h2{width: 480px;font-size: 30px;line-height: 40px;height: 80px;}
    .banner button{width: 225px;}
    footer{width: 768px;}
    footer .rotate{width: 773.5px;}
    footer .image{width: 768px;}
    footer .image .txt{width: 700px;}
    footer .image .txt h2::after{left: 210px;}
    footer .image .line{width: 700px;}
    footer .image .nav{width: 700px;}
    
}


/* mobile 425px screen */
@media screen and (max-width:425px)
{
    body{max-width: 425px;}
    .container{height: 1000px;}
    header {width: 376px;}
    header .button{width: 170px;}
    header .button button:last-child{width: 100px;height: 45px;}
    .hero{width: 376px;}
    .hero .content h1{width: 376px;height: 95px; font-size: 40px;line-height: 50px;text-align: center;}
    .hero .content p{width: 376px;margin: 30px 0;}
    .hero .image{width: 376px;height: 300px;margin-top: 70px;}
    .company{width: 376px;padding-left: 20px;}
    .company .comp-log{width: 376px; flex-wrap: wrap;margin: 0 auto 70px;gap: 15px;}
    .company .comp-log img{height: 25px;}
    .work .cont h3{font-size: 36px;}
    .work .cont p{width: 376px;}
    .work .profile{width: 376px;}
    .job{width: 376px;}
    .job .images{width: 376px;height: 376px;}
    .feature .content h2{font-size: 36px;}
    .feature .content p{width: 376px;}
    .parent-cont{width: 376px;}
    .review{width: 376px;}
    .review .txt{margin-bottom: 15px;}
    .review .txt h2{font-size: 35px;}
    .review .txt p{width: 376px;}
    .rev-txt{width: 376px;}
    .rev-txt .content{align-items: center;padding-left: 0px;}
    .banner{width: 376px;flex-direction: column;}
    .banner h2{width: auto;text-align: center;}
    footer{width: 425px;}
    footer .rotate{display: none;}
    footer .image{width: 425px;padding-top: 0px;height: 350px;}
    footer .image .txt{width: 376px; flex-direction: column;justify-content: space-evenly;}
    footer .image .txt h2{width: auto;font-size: 36px;text-align: center;}
    footer .image .txt h2::after{width: 167px;top: 98px;left: 195px;}
    footer .image .txt .search{width: 230px;height: 48px;margin-top: 15px;}
    footer .image .line{width: 425px;}
    footer .image .nav{width: 376px;justify-content: space-evenly;gap: 10px;}
    footer .image .nav a{font-size: 16px;}
    
}


/* mobile 375px screen */
@media screen and (max-width:375px)
{
    body{max-width: 375px;}
    .container{height: 990px;}
    header {width: 340px;}
    header .button{width: 160px;}
    .hero{width: 340px;}
    .hero .content h1{width: auto;}
    .hero .content p{width: auto;margin: 30px 0 35px 0;}
    .hero .image{width: 340px;height: 300px;margin-top: 70px;}
    .company{width: 340px;padding-left: 10px;}
    .company .comp-log{width: 340px;}
    .work .cont p{width: 340px;}
    .work .profile{width: 340px;justify-content: space-evenly;}
    .work .profile .card{width: 340px;}
    .job{width: 340px;}
    .job .content .child1 p{margin-top: 15px;}
    .job .images{width: 340px;height: 340px;}
    .feature {width: 340px;margin: auto;}
    .feature .content h2{font-size: 30px;}
    .feature .content p{width: 340px;}
    .parent-cont{width: 340px;}
    .parent-cont .card{width: 300px;padding-left: 15px;}
    .c-container .card h3{width: 270px;font-size: 20px;}
    .c-container .card .detail .de-cont{margin: 0 20px 0 22px;}
    .review{width: 340px;}
    .review .txt{margin-bottom: 15px;}
    .review .txt h2{font-size: 30px;text-align: center;}
    .review .txt p{width: 340px;}
    .rev-txt{width: 375px;}
    .rev-txt .content{width: 340px;padding-left: 0px;}
    .rev-txt .content p{width: 320px;}
    .banner{width: 340px;flex-direction: column;}
    footer{width: 375px;}
    footer .image{width: 375px;}
    footer .image .txt{width: 340px;}
    footer .image .txt h2{width: auto;font-size: 30px;line-height: 40px;}
    footer .image .txt h2::after{width: 140px;top: 78px;left: 176px;}
    footer .image .line{width: 375px;}
    footer .image .nav{width: 375px;}
    
}


/* mobile 320px screen */
@media screen and (max-width:320px)
{
    body{max-width: 320px;}
    .container{height: 990px;}
    header {width: 300px;margin-top: 20px;}
    header .logo {width: 80px;height: 30px;}
    .sm-nav-cont .sm-bar{font-size: 30px;}
    header .button{width: 150px;}
    header .button button{font-size: 15px;}
    header .button button:last-child{width: 90px;height: 40px;}
    .hero{width: 300px;}
    .hero .content p{height: 105px; margin: 30px 0;}
    .hero .image{width: 300px;height: 270px;}
    .company{width: 300px;}
    .company .comp-log{width: 300px;}
    .work .cont p{width: 300px;}
    .work .profile{width: 320px;}
    .work .profile .card{width: 300px;}
    .work .profile .card p{width: 280px;height: 90px;}
    .work .profile .card button{margin-top: 7px;}
    .job{width: 300px;}
    .job .images{width: 300px;height: 300px;}
    .feature {width: 320px;}
    .feature .content p{width: 300px;}
    .parent-cont{width: 320px;}
    .c-container{gap: 20px;}
    .parent-cont .c-container:first-child{margin-bottom: 20px;}
    .review{width: 320px;}
    .review .txt h2{font-size: 28px;}
    .review .txt p{width: 300px;}
    .rev-txt{width: 320px;}
    .rev-txt .content{width: 300px;height: 350px;}
    .rev-txt .content p{width: 280px;text-align: center;}
    .banner{width: 300px;}
    .banner h2{font-size: 28px;}
    footer{width: 320px;}
    footer .image{width: 320px;}
    footer .image .txt{width: 300px;}
    footer .image .txt h2::after{top: 75px;left: 156px;}
    footer .image .line{width: 320px;}
    footer .image .nav{width: 320px;gap: 7px;}
    footer .image .nav a{font-size: 14px;}
    
}