*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fira Code';
    font-style: normal;
}

body
{
    max-width: 1440px;
    position: relative;
    margin: auto;
}

/* header start here  */
header
{
    display: flex;
    align-items: center;
}

header .logo
{
    padding: 0 166px 0 190px;
    font-family: 'Great Vibes', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 72px;
    letter-spacing: 0.244423px;
    color: #1A54AB;
}

header .menu a
{
    text-decoration: none;
    padding-left: 70px;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #303030;
}

header #bar{display: none;}

/* right side background and image */
.sidePos
{
    position: absolute;
    width: 381px;
    height: 780px;
    right: 0px;
    top: 0px;
    background: #3F8AF8;
}

.sidePos img 
{
    width: 450px;
    height: 652px;
    position: absolute;
    top: 130px;
    right: 120px;
}

/* header text */
.text
{
    display: flex;
    flex-direction: column;
    padding-top: 160px;
    padding-left: 190px;
}

.text pre
{
    width: 300px;
    height: 140px;
    font-size: 50px;
    line-height: 65px;
    font-weight: 700;
    letter-spacing: 0.244423px;
    color: #1A54AB;
}

.text h1{display: none;}

.text p 
{
    width: 550px;
    height: 164px;
    font-size: 20px;
    font-weight: 500;
    line-height: 35px;
    color: #3D3E41;
}

.text button
{
    background: none;
    width: 222px;
    height: 61px;
    border: 2px solid #2164C6;
    border-radius: 2px;
    font-size: 16px;
    line-height: 20px;
    color: #1A54AB;
}

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

.work h2 
{
    font-size: 32px;
    font-weight: 600;
    line-height: 42px;
    color: #1A54AB;
}

.work p 
{
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    letter-spacing: 0.1px;
    color: #3D3E41;
}

.work .images
{
    display: flex;
    flex-wrap: wrap;
    padding: 80px 0 30px 172px;
    gap: 20px;
}

.work .images img 
{
    width: 350px;
    height: 240px;
}

.work button
{
    width: 222px;
    height: 61px;
    border: 2px solid #1A54AB;
    border-radius: 2px;
    background: none;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #1A54AB;
}

.work .dot
{
    position: absolute;
    top: 945px;
    left: 110px;
    z-index: -1;
}

/* testomonial section  */
.testom
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}

.testom .dot 
{
    position: absolute;
    top: 1600px;
    right: 0px;
    z-index: -1;
}

.testom h2 
{
    font-weight: 600;
    font-size: 32px;
    height: 50px;
    line-height: 42px;
    color: #1A54AB;
}

.testom p 
{
    width: 800px;
    height: 70px;
    font-weight: 500;
    font-size: 24px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 0.2px;
    color: #3D3E41;
}

.testom .tst-txt
{
    display: flex;
    gap: 30px;
    margin-top: 100px;
}

.testom .tst-txt .txt 
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 342px;
    height: 411px;
    position: relative;
    background: #FFFFFF;
    border: 1px solid #1A54AB;
}

.testom .tst-txt .txt  img 
{
    width: 100px;
    height: 100px;
    position: absolute;
    top: -50px;
    left: 120px;
}

.testom .tst-txt .txt p 
{
    width: auto;
    height: auto;
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    color: #152436;
    margin: 15px 10px 30px;
}

.testom .tst-txt .txt h3 
{
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    color: #152436
}

.testom .dota
{
    position: absolute;
    top: 2000px;
    left: 36px;
    z-index: -1;
}

/* review section  */
.review
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: #3F8AF8;
    margin-top: 100px;
    margin-bottom: 100px;
    height: 200px;
}

.review .txt
{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;
    font-weight: 500;
}

.review .txt h3 
{
    font-size: 42px;
    line-height: 52px;
}

.review .txt p 
{
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0.2px;
}

/* form section */
form 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

form h3 
{
    width: 800px;
    height: 104px;
    font-weight: 600;
    font-size: 32px;
    line-height: 52px;
    color: #1A54AB;
    text-align: center;
    margin-bottom: 25px;
}

form input, form textarea
{
    width: 618px;
    height: 50px;
    padding: 15px;
}

form textarea
{
    height: 130px;
}

form input[type="submit"]
{
    background: #1A54AB;
    border-radius: 2px;
    color: #FFFFFF;
    border: none;
    outline: none;
    margin-top: 20px;
}

form .fdot2
{
    position: absolute;
    top: 3260px;
    right: 0px;
}

form .fdot1
{
    position: absolute;
    top: 2850px;
    left: 0px;
}

/* footer section  */
footer 
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 114px;
    height: 55px;
    background: #3F8AF8;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
    color: #FFFFFF;
}


/* 1366 screen device */
@media screen and (max-width:1366px) {
    body{max-width: 1366px;}
    header .logo{padding: 0 160px 0 180px;}
    header .menu a{padding-left: 52px;}
    .work .images{gap: 6px;}
    .work .images img {width: 330px;height: 240px;}

}


/* 1280 screen device */
@media screen and (max-width:1280px)
{
    body{max-width: 1280px;}  
    header .logo{padding: 0 100px 0 160px;}
    header .menu a{padding-left: 56px;}
    .text{padding-left: 160px;}
    .work .images{padding: 80px 0 30px 160px;}
    .work .images img {width: 322px;}
    .work .dot{left: 105px;}
}


/* 1024 screen device */
@media screen and (max-width:1024px)
{
    body{max-width: 1024px;} 
    header .logo{padding: 0 30px 0 50px;}
    header .menu a{padding-left: 45px;}
    .sidePos{width: 345px;}
    .sidePos img {width: 440px; right: 50px;}
    .text{padding-left: 50px;}
    .text p {width: 500px;height: 200px;}
    .work .images{padding: 80px 0 30px 50px;gap: 15px;}
    .work .images img {width: 300px;}
    .work .dot{left: 0px;top: 980px;}
    .testom .tst-txt{gap: 25px;} 
    .testom .tst-txt .txt {width: 300px;}
    .testom .tst-txt .txt p {margin: 30px 10px 30px;}
    .review .txt h3 {font-size: 38px;}
    .review .txt p {font-size: 22px;letter-spacing: 0.11px;}
    form .fdot2{ top: 3300px;}
   }


   /* 768px tab screen device */
@media screen and (max-width:768px)
{
    body{max-width: 768px;} 
    header .logo{padding: 0 15px 0 25px;}
    header .menu a{padding-left: 20px;}
    .sidePos{width: 245px;height: 600px;}
    .sidePos img {width: 300px; height: 430px; right: 50px;}
    .text{padding-left: 30px;padding-top: 90px;}
    .text pre{ height: 120px;font-size: 45px;line-height: 55px;}
    .text p { width: 420px;  height: 200px;line-height: 30px;}
    .work .images{padding: 80px 0 30px 50px;gap: 15px;}
    .work .images img {width: 330px;}
    .work .dot{left: 0px;top: 900px;}
    .testom .dot {top: 1750px;}
    .testom p {width: 700px;font-size: 22px;letter-spacing: 0.1px;}
    .testom .tst-txt{gap: 100px;flex-wrap: wrap;padding-left: 134px;} 
    .testom .tst-txt .txt {width: 500px;}
    .testom .tst-txt .txt  img {left: 200px;}
    .testom .dota{top: 2720px;left: 15px;}
    .review .txt h3 {font-size: 30px;}
    .review .txt p {font-size: 18px;letter-spacing: 0px;}
    form h3 {width: 700px;font-size: 28px;line-height: 50px;}
    form input, form textarea{width: 600px;}
    form .fdot2{top: 4480px;z-index: -1;}
    form .fdot1{top: 4078px;z-index: -1;}
}


/* 425px mobile screen device */
@media screen and (max-width:425px)
{
    body{max-width: 425px;} 
    header{justify-content: space-between;padding: 0 20px;}
    header .logo{padding: 0px;}
    header #bar{display: block;font-size: 30px;color: white;}
    header .menu{display: none;flex-direction: column;position: absolute;top: 70px;left: 0px;width: 425px;height: 150px; align-items: center;justify-content: space-evenly; background-color: #EEF1FF;opacity: 80%;}
    header .menu a{padding: 0px;}
    .sidePos{width: 212.5px;height: 550px;z-index: -1;}
    .sidePos img {width: 300px; height: 400px; right: 80px;top: 100px;}
    .text{padding:580px 8px 0;align-items: center;}
    .text pre{display: none;}
    .text h1{display: block; height: 115px;font-size: 40px;font-weight: 700;letter-spacing: 0.144423px;color: #1A54AB;text-align: center;}
    .text p { width: 410px;  height: 200px;line-height: 30px;text-align: center;}
    .work{margin-top: 150px;}
    .work h2 {font-size: 30px;}
    .work p {font-size: 22px;padding: 10px;text-align: center;}
    .work .images{padding: 80px 0 30px 45px;gap: 10px;}
    .work .images img {width: 330px;}
    .work .dot{display: none;}
    .testom .dot {display: none;}
    .testom p {width: 420px;height: 160px;padding: 0 5px;}
    .testom .tst-txt{padding: 5px;} 
    .testom .tst-txt .txt {width: 415px;}
    .testom .tst-txt .txt  img {left: 150px;}
    .testom .dota{display: none;}
    .review{flex-wrap: wrap;height: 250px;}
    .review .txt h3 {font-size: 30px;}
    .review .txt p {font-size: 20px;letter-spacing: 0px;}
    form h3 {width: 420px;font-size: 22px;line-height: 36px;}
    form input, form textarea{width: 420px;}
    form .fdot2{display: none;}
    form .fdot1{display: none;}
}


/* 375px mobile screen device */
@media screen and (max-width:375px)
{
    body{max-width: 375px;} 
    header .logo{font-size: 34px;}
    header .menu{width: 375px;}
    .text p { width: 360px;  height: 205px;}
    .work .images{padding: 80px 0 30px 24px;}
    .testom p {width: 360px;height: 180px;}
    .testom .tst-txt .txt {width: 370px;}
    .testom .tst-txt .txt  img {left: 134px;}
    .review .txt p {font-size: 18px;}
    form h3 {width: 360px;font-size: 22px;line-height: 36px;}
    form input, form textarea{width: 370px;}
}


/* 320px mobile screen device */
@media screen and (max-width:320px)
{
    body{max-width: 320px;} 
    header .logo{font-size: 34px;}
    header .menu{width: 320px;}
    .sidePos{width: 174px;}
    .sidePos img {width: 280px; right: 34px;}
    .text p { width: 310px;  height: 260px;}
    .work .images{padding: 80px 0 30px 5px;}
    .work .images img{width: 310px;}
    .testom p {width: 310px;height: 200px;}
    .testom .tst-txt .txt {width: 315px;}
    .testom .tst-txt .txt  img {left: 104px;}
    .review .txt h3{font-size: 20px;}
    .review .txt p {font-size: 16px;}
    form h3 {width: 310px;}
    form input, form textarea{width: 315px;}
    footer{height: 100px; text-align: center;}
}