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

body{
    font-family: "Poppins", sans-serif;
}
/* header */

.main-header{ background-color: #03081A; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 20px; }

.header-cnt-wrp { display: flex; justify-content: space-between; }

.category-list{ display: flex; gap: 40px; }

.logo{ padding-top: 12px; }

.category-list li{  list-style: none }

.hamburger-btn { display: none; }

.category-list li a{ color: #FFFFFF ; font-size: 14px; line-height: 26px; font-weight: 400; text-decoration: none; }

.right-cnt-header{display: flex; justify-content: flex-end; width: 100%;}

.menu-list{ padding-top: 28px }

.banner-btn-wrp {display: flex;  padding-top: 24px; padding-left: 40px; }


/* hero-section */

.hero-banner-sec * {  font-family: "Poppins", sans-serif; }

.hero-banner-sec{ background-color: #03081A; padding : 100px 0px ; }

.banner-cnt{ font-size: 48px; line-height: 58px; display: flex; flex-direction: column }

.banner-txt-cnt{ padding-top: 28px }

.banner-cnt h1 { font-weight: 400; color: #FFFFFF; font-size: 48px; margin-bottom: 14px;  line-height: 58px }

.banner-cnt span{ font-weight: 600; color: #3D78F1; display: block }
   
.banner-cnt p{ margin-bottom: 12px;  font-size: 19px;  line-height: 32px; font-weight: 400; color: #FFFFFF; max-width: 469px }

.hero-banner-wrp { display: flex; justify-content: space-between; }

.hero-banner-wrp .banner-txt-cnt { flex: 0 0 45%; }

.hero-banner-wrp  .hero-right-img { flex: 1; max-width: 548px; }

.hero-btn-wrp{ display: flex; gap: 4px }

.hero-btn-wrp img { max-width: 100%; height: auto; }

.hero-right-img{  position: relative; display: flex; justify-content: flex-end }

.inner-img{ position: absolute; left: -30px; bottom: -50px; }

/* About us */

.about-us-main * {  font-family: "Poppins", sans-serif; }

.about-us-main  { background-color: #F4F7FA; padding: 138px; }

.about-us-img img { max-width: 100%; width: 100%;  height: auto; margin-bottom: 26px; padding: 0 13px; }

.about-us-img span {display: inline-block; }

.about-us-cnt { display: flex; height: 100%; flex-direction: column; justify-content: center; }

.about-us-img { display: flex; flex: 0 0 50%; }

.about-us-cnt { flex: 1; }

.about-us-wrp { display: flex; justify-content: space-between; align-items: center; }

.about-right-img { margin-top: 40px; }

.about-us-cnt { max-width: 500px;}

.about-us-cnt h3 { font-size: 36px; font-weight: 700; color: #161C2D; margin-bottom: 30px; }

.about-us-cnt p { font-size: 18px; color: #161C2D; line-height: 32px; font-weight: 400;}


/* app-screenshot */

.app-ss-main * { font-family: "Poppins", sans-serif; }

.app-ss-main h3{ font-size: 36px;font-family: poppins;line-height: 58px; font-weight: 700;color:#161C2D;text-align: center; margin-bottom: 25px; }

.app-ss-main p{ font-size: 18px;line-height: 32px;font-weight: 400;max-width: 620px;height: 69px;color: #161C2D; text-align: center; margin-bottom: 66px; }

.app-ss-center-cnt{ display: flex;flex-direction: column;align-items: center; }

.app-img-wrap{ display: flex; justify-content: space-between; gap: 20px;}

.app-ss-wrap{ padding: 82px 0px 89px;}

.app-img img{max-width: 100%; height: auto;}

/* video-main */

.video-main * { font-family: "Poppins", sans-serif; }

.video-main{ background-color: #F4F7FA;}

.video-main-wrap{ display: flex; flex-direction: column; align-items: center; padding: 80px 0px 73px;}

.video-txt-wrp {max-width: 969px; font-size: 18px; line-height: 32px; font-weight: 400; text-align: center; margin-top: 44px;}

.video-wrp { width: 100%; position: relative;}

.video-wrp::after { content: ""; position: absolute; top: 0; left: 0; right:0; bottom: 6px; border-radius: 16px; z-index: 99; background: rgba(0,0,0,.3); }

.video-btn { background-color: transparent; border: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100; }

.video-wrp video { border: none; border-radius: 16px; width:100% }

/* contact-us */

.contact-us-wrap * {  font-family: "Poppins", sans-serif;}

.contact-us-wrap{ padding: 44px 0px 52px;}

.contact-form-wrp { display: flex; }

.contact-left-sec { margin-right: 26px; }

.contact-left-sec, .contact-form { flex:  0 0 50%; }

.contact-form label {color: #000000; font-weight: 600; font-size: 16px; display:block; margin-bottom: 8px;}

.contact-form { padding: 40px;}

.contact-form form {display: block; width: 100%; }

.contact-form input , .contact-form textarea{ padding:13px ; width: 100%; border-radius: 16px; border: 1px solid #F2F2F2;}

.contact-us-cnt h3{ font-size: 36px;line-height: 58px;font-weight: 700;color: #161C2D; margin-bottom: 14px;}

.contact-us-cnt p{font-size: 18px;line-height: 32px;font-weight: 400;color: #161C2D;max-width: 620px;text-align: center;margin-bottom: 60px;}

.contact-us-cnt{ display: flex; flex-direction: column;align-items: center;}

.submit-btn{ padding: 10px 32px; border-radius: 6px;background-color: #427FF9;color: #ffffff;font-size: 16px;font-weight: 600; border: none; margin-top: 15px;}

.contact-form-wrp{margin-left: 40px;}

.contact-form-field { margin-bottom: 20px;  }

/* footer */

.footer-main * { font-family: "Poppins", sans-serif; }

.footer-main { background-color: #F4F7FA;}

.footer-wrp { display: flex; justify-content: space-between; align-items: center; }

.footer-cnt ul li{list-style: none;}

.footer-cnt ul li a{ text-decoration: none; color: #000000;}

.footer-cnt{ max-width:282px; height: 59px; font-size: 16px; line-height: 32px; font-weight: 500; margin: 40px 0px 36px;}

.footer-links{display: flex; padding-left: 0px; margin-bottom: 1px;}

.footer-img{ margin: 48px 0px 42px; display: flex; justify-content: flex-end;}

/*  */



@media screen and (max-width: 992px){

    .container { max-width: 960px; margin: 0 auto;  }

    .right-cnt-header { display: none; }

    .hero-banner-sec { padding: 60px 0; }

    .main-img { max-width: 100%; }

    .hero-banner-wrp { flex-direction: column-reverse; }

    .hamburger-btn {display: block; }

    .right-cnt-header.active { bottom: 0; display: block; position: fixed; top: 80px; z-index: 99; background-color: #fff; left: 0; right: 0; }

    .category-list { gap: unset; height:calc(100vh - 182px); }

    .banner-btn-wrp { padding:  0 25px;  }

    .right-cnt-header.active ul { flex-direction: column; }

    .right-cnt-header.active ul a { color: #000; padding: 15px 20px; display: inline-block; width: 100%; }

     .banner-txt-cnt { text-align: center; }
    
     .hero-banner-wrp .hero-right-img {  max-width: 100% ; justify-content: center;} 

     .inner-img { left: 130px; } 

     .banner-cnt h1 { max-width: 100%; text-align: center;}

      .hero-btn-wrp { justify-content: center; }

      .banner-txt-cnt { padding-top: 60px; }

      .banner-cnt p { margin: 0 auto 30px; }

      .hamburger-btn  { background-color: transparent; border: none;  }

      .hamburger-btn i {font-size: 30px; color: #fff; }

      .about-us-wrp { flex-direction: column; }

      .about-us-cnt h3 , .about-us-cnt p { text-align: center; }

      .about-us-cnt { max-width: 100%; }

      .app-img-wrap {flex-wrap: wrap; justify-content: center;}

      .app-img { flex: 0 0 30%; margin-bottom: 30px; }

      .contact-form-wrp { flex-direction: column; }

      .contact-left-sec iframe { min-height: 400px;  }

      .contact-form { padding: 40px 0; }
}

@media screen and (max-width: 768px){

    .container { max-width: 720px; margin: 0 auto;  }

    .hero-banner-wrp { flex-direction: column-reverse; }

    .hero-right-img .inner-img { left: 0; right:0; margin: 0 auto; bottom: -30px;  }
    
    .hero-right-img .inner-img { width: 90px; max-width: 100%;  }

    .banner-cnt h1 { font-size: 36px; line-height: 44px; }

    .banner-cnt p { font-size: 16px; }

    .banner-txt-cnt { text-align: center; }

    .banner-cnt p { max-width: 100%; }

    .about-us-cnt h3 , .app-ss-center-cnt h3 , .contact-us-cnt h3 { font-size: 30px; }

    .about-us-cnt p , .app-ss-center-cnt p , .contact-us-cnt p,  .video-txt-wrp p  { font-size: 16px; line-height: 32px; }

    .about-right-img { margin: 0; }

    .about-us-main , .app-ss-wrap , .video-main-wrap , .contact-us-wrap { padding: 60px 20px; }

    .about-us-cnt h3 { margin-bottom: 15px; }
    
    .about-us-cnt { text-align: center; }

    .app-img { flex: 0 0 30%; margin-bottom: 30px; }

    .app-ss-center-cnt h3 , .contact-us-cnt h3 { margin-bottom: 15px; }

    .footer-wrp { flex-direction: column; }

    .footer-img , .contact-left-sec , .contact-form-wrp { margin: 0; }

    .hamburger-btn i { font-size: 24px; }

    .submit-btn { padding: 8px 25px; font-size: 14px; margin: 0; }

    .contact-form-field label { font-size: 14px;}
    
}


@media screen and (max-width: 576px){

    .container { max-width: 540px; margin: 0 auto;  }

   .hero-right-img .inner-img { width: 60px ; }

    .about-us-img { flex-direction: column; }

    .about-us-cnt h3 , .app-ss-center-cnt h3 , .contact-us-cnt h3 { font-size: 26px; }

    .about-us-cnt p , .app-ss-center-cnt p , .contact-us-cnt p,  .video-txt-wrp p  { font-size: 14px; line-height: 26px;}

    .app-img { flex: 0 0 100%; text-align: center; }

    .app-ss-main p {line-height: 26px;}

    .video-btn img { max-width: 60px;  }

    .footer-links , .footer-cnt p { font-size: 14px; }
}