body{ font-family: 'Poppins', sans-serif; color: #22252a; }

#mmenu, label[for='mmenu']{ display: none; }

.header{ position: fixed; top: 0; left: 0; width: 100%; height: 78px; display: flex; justify-content: space-between; background-color: #00000075; z-index: 1000; }
.header .logo{ width: 130px; margin: 25px; }
.header.in_hed{ position: relative; background-color: #2e476e; }

.mainmenu ul{ padding: 0; margin: 0; display: flex; height: 100%; }
.mainmenu ul li{ list-style: none; }
.mainmenu ul li a{ text-decoration: none; text-transform: uppercase; color: #fff; padding: 27px 16px; display: block; font-weight: 600; font-size: 14px; height: 100%; transition:all 0.3s; }
.mainmenu ul li a:hover{ color: #ddd; }
.mainmenu ul li.active a{ color: #11dcf5; border-bottom: #11dcf5 solid 3px; }

.tell{ color: #fff; font-weight: 600; font-size: 14px; display: flex; align-items: center; margin: 25px; }

.log{ margin-right:15px; }
.log .btn{ display: flex; align-items: center; column-gap: 15px; background-color: #11dcf5; height: 40px; margin: 18px; border-radius: 6px; }
.log .btn{ text-decoration: none; color: #22252a; }
.log .btn:hover{ background-color: #fff; }

.hero_bnr{ background-image:linear-gradient(0,#8978d4,#3e7ec6); height: calc(100vh - 40px); position: relative; }
.hero_bnr .img{ width: 80%; height: 100%; position: absolute; right: 0; -webkit-mask-image: linear-gradient(-90deg, black 60%, transparent); }
.hero_bnr .img img{ object-fit: cover; width: 100%; height: 100%; }
.hero_bnr .container{ position: relative; height: 100%; max-width: 100% !important; display: flex; align-items: flex-end; justify-content: flex-start; }
.hero_bnr .container .txt{ color: #fff; text-align: left; width: 30%; padding-top: 20px; margin-left: 15px; margin-bottom: 100px; position: relative; }
.hero_bnr .container .txt h2{ font-size: 40px; font-weight: 700; position: relative; }
.hero_bnr .container .txt h3{ font-size: 18px; font-weight: 400; color: #fff; margin-top: 15px; margin-bottom: 25px; }
.hero_bnr .container .txt small{ font-size: 18px; font-weight: 600; letter-spacing: 1px; }
.hero_bnr .container .txt .btn{ 
    text-transform: uppercase; color: #fff; font-weight: 600; background-image:linear-gradient(90deg,#8978d4,#3e7ec6); border: 0; padding: 25px 45px; margin-top: 35px; border-radius: 6px;
    transition:all 0.3s;
 }
.hero_bnr .container .txt .btn:hover{ background-image:linear-gradient(90deg,#3e7ec6,#8978d4); }
.hero_bnr .container .txt .link{ text-decoration: none; font-weight: 600; color: #11dcf5; display: inline-flex; align-items: center; column-gap: 15px; transition: all 0.3s; }
.hero_bnr .container .txt .link span{ margin-left: 0px; transition: all 0.2s; }
.hero_bnr .container .txt .link:hover span{ margin-left: 5px; }

.hdr{ 
    background-image: linear-gradient(90deg,#8978d4,#3e7ec6); text-transform: uppercase; color: #fff; padding: 15px; height: 250px; 
    display: flex; align-items: center; justify-content: center; position: relative; }
.hdr::before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/logo.svg) no-repeat center; background-size: 100%; opacity: 0.05; }
.hdr h2{ margin: 0; font-size: 42px; font-weight: 600; }

.section{ padding: 70px 15px;}

.sec1 .hed{ text-align: center; margin-bottom: 50px; }
.sec1 .hed h2{ font-size: 42px; font-weight: 600; color: #354b7a; margin-bottom: 15px; }
.ps_wrap{ position: relative; display: flex; justify-content: space-between; }
.ps_wrap::before{ content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: #eee; }
.ps_wrap .s_sec h3{ font-size: 22px; font-weight: 700; color: #354b7a; }
.ps_wrap .list{ background-image: linear-gradient(90deg,#8978d4,#3e7ec6); color: #fff; padding: 25px 30px; border-radius: 10px; }
.ps_wrap .list:not(:first-child){ margin-top: 30px; }
.ps_wrap .list.bg2{ background-image: linear-gradient(90deg,#f2f0ff,#d2e7ff); color: #444; }
.ps_wrap .list.bg2.right_arr::after{ border-bottom: #d2e7ff solid 15px; }
.ps_wrap .list.bg2.left_arr::after{ border-bottom: #f2f0ff solid 15px; }
.ps_wrap .list.right_arr, .ps_wrap .list.left_arr{ position: relative; }
.ps_wrap .list.right_arr::after{ content: ""; position: absolute; left: 100%; top: 15px; border-right: transparent solid 20px; border-bottom: #3e7ec6 solid 15px; }
.ps_wrap .list.left_arr::after{ content: ""; position: absolute; right: 100%; top: 15px; border-left: transparent solid 20px; border-bottom: #8978d4 solid 15px; }
.ps_wrap .list.right_arr::before,
.ps_wrap .list.left_arr::before{ content: ""; position: absolute; left: calc(100% + 20px); top: 23px; width: 12px; height: 12px; background-color: #354b7a; border-radius: 50%; border: #fff solid 2px; box-shadow: 0 0 0 1px #bbb; }
.ps_wrap .list.left_arr::before{ left: auto; right: calc(100% + 18px); }
.p_sec{ width: calc(100% - 10px); }
.s_sec{ width: calc(100% - 10px); margin-left: auto; }
.p_ic{ position: relative; display: flex; height: 100%; }
.p_ic img{ width: 80px; }
.p_ic .txt{ font-size: 32px; font-weight: 700; transform: translateY(-50%) rotateZ(-90deg); position: absolute; top: 50%; left: 50px; color: #354b7a; }
.p_ic .txt::before{ content: ""; position: absolute; top: 50%; left: calc(100% + 10px); width: 50px; height: 1px; background-color: #354b7a; }
.p_ic .txt::after{ content: ""; position: absolute; top: 50%; right: calc(100% + 10px); width: 50px; height: 1px; background-color: #354b7a; }
.s_ic{ position: relative; display: flex; height: 100%; justify-content: flex-end; }
.s_ic img{ width: 80px; }
.s_ic .txt{ font-size: 32px; font-weight: 700; transform: translateY(-50%) rotateZ(90deg); position: absolute; top: 50%; right: 50px; color: #354b7a; }
.s_ic .txt::before{ content: ""; position: absolute; top: 50%; left: calc(100% + 10px); width: 50px; height: 1px; background-color: #354b7a; }
.s_ic .txt::after{ content: ""; position: absolute; top: 50%; right: calc(100% + 10px); width: 50px; height: 1px; background-color: #354b7a; }

.sec2{ background-image: linear-gradient(90deg,#f2f0ff,#d2e7ff); }
.sec2 .hed{ text-align: center; margin-bottom: 50px; }
.sec2 .hed h2{ font-size: 42px; font-weight: 600; color: #354b7a; margin-bottom: 15px; }
.sec2 .sec2_wrap{ background-color: #fff; box-shadow: 0 0 10px #00000015; padding: 50px; }
.sec2 .sec2_wrap .list .li:not(:first-child){ margin-top: 25px; }
.sec2 .sec2_wrap .list .li b{ color: #3e7ec6; }
.sec2 .sec2_wrap h3{ font-size: 38px; font-weight: 400; color: #354b7a; }
.sec2 .sec2_wrap .ul{ padding: 0; margin: 0; background-color: #8978d415; padding: 15px 20px; }
.sec2 .sec2_wrap .ul li{ list-style: none; font-weight: 400; font-size: 18px; color: #354b7a; }
.sec2 .sec2_wrap .ul li:not(:first-child){ margin-top: 15PX; }

.sec3 .hed{ text-align: center; margin-bottom: 50px; }
.sec3 .hed h2{ font-size: 42px; font-weight: 600; color: #354b7a; margin-bottom: 15px; }
.sec3 .our_solution_wrap{ position: relative; display: flex; height: 800px; }
.sec3 .our_solution_wrap .key{ width: 70%; margin: auto; }
.sec3 .our_solution_wrap .li{ position: absolute; width: 300px; top: 0; left: 0;  }
.sec3 .our_solution_wrap .li .ttl{ font-size: 18px; font-weight: 700; display: flex; column-gap: 15px; border: #99a6b9 solid 1px; padding: 5px 10px; border-radius: 10px; color: #99a6b9; background-color: #fff; position: relative; z-index: 1; }
.sec3 .our_solution_wrap .li .ttl .num{ border-right: #bbb solid 1px; padding-right: 15px; color: #354b7a; display: flex; align-items: center; }
.sec3 .our_solution_wrap .li .p{ margin-left: 57px; margin-bottom: 0; padding: 15px 0 30px; position: relative; }
.sec3 .our_solution_wrap .li .p::before{ content: ""; position: absolute; top: 0; left: -35px; border-left: #99a6b9 solid 1px; height: 100%; }
.sec3 .our_solution_wrap .li .p::after{ content: ""; position: absolute; bottom: 0; left: -42px; width: 15px; height: 15px; border: #99a6b9 solid 3px; border-radius: 50%; background-color: #fff; }

.sec3 .our_solution_wrap .li.li1 .p{ margin-left: auto; margin-right: 57px; /*text-align: right; padding: 15px 0 94px;*/ }
.sec3 .our_solution_wrap .li.li1 .ttl .num{ order: 1; padding-left: 15px; padding-right: 0;border-left: #bbb solid 1px; border-right:0; }
.sec3 .our_solution_wrap .li.li1 .p::before{ left: auto; right: -22px; }
.sec3 .our_solution_wrap .li.li1 .p::after{ left: auto; right: -29px; }

.sec3 .our_solution_wrap .li.li2{ top: auto; bottom: 0; left: 370px; width: 715px;  }
.sec3 .our_solution_wrap .li.li2 .ttl{ border-color: #34C0CE; color: #34C0CE; }
.sec3 .our_solution_wrap .li.li2 .p::before,
.sec3 .our_solution_wrap .li.li2 .p::after{ border-color: #34C0CE; }
.sec3 .our_solution_wrap .li.li2 .p::before{ top: auto; bottom: 100%; }
.sec3 .our_solution_wrap .li.li2 .p::after{ bottom: calc(100% + 85px); }

.sec3 .our_solution_wrap .li.li3{ left: 530px; width: 595px;  }
.sec3 .our_solution_wrap .li.li3 .ttl{ border-color: #66B3E3; color: #66B3E3; }
.sec3 .our_solution_wrap .li.li3 .p::before,
.sec3 .our_solution_wrap .li.li3 .p::after{ border-color: #66B3E3; }

.sec3 .our_solution_wrap .li.li4{ top: auto; bottom: 84px; left: auto; right: 7px; width: 350px;  }
.sec3 .our_solution_wrap .li.li4 .ttl{ border-color: #90A8D7; color: #90A8D7; }
.sec3 .our_solution_wrap .li.li4 .p::before,
.sec3 .our_solution_wrap .li.li4 .p::after{ border-color: #90A8D7; }
.sec3 .our_solution_wrap .li.li4 .p::before{ top: auto; bottom: 100%; }
.sec3 .our_solution_wrap .li.li4 .p::after{ bottom: calc(100% + 125px); }

.sec3 .row{ align-items: center; border-bottom: #ddd solid 1px; padding-bottom: 50px; margin-bottom: 50px; }
.sec3 h3{font-size: 40px; font-weight: 700; color: #948eb2; }

.sec4 .hed{ text-align: center; margin-bottom: 50px; }
.sec4 .hed h2{ font-size: 42px; font-weight: 600; color: #354b7a; margin-bottom: 15px; }
.sec4 .inner{ margin: 30px 0; }
.sec4 .inner .img{ margin-bottom: 25px; }
.sec4 .inner .img img{ height: 100px; }
.sec4 .inner h2{ color: #948eb2; }
.sec4 .inner ul{ padding-top: 15px; padding-left: 20px; }
.sec4 .row [class*="col-"]:not(:first-child){ border-left: #f3f3f3 solid 1px; }
.sec4 .row [class*="col-"]:nth-child(4){ border: 0; }
.sec4 .btm_sec{ text-align: center; color: #fff; margin-top: 80px; }
.sec4 .row [class*="col-"]:nth-child(1), .sec4 .row [class*="col-"]:nth-child(2), .sec4 .row [class*="col-"]:nth-child(3){ border-bottom: #f3f3f3 solid 1px; }

.sec5{ text-align: center; min-height: calc(100vh - 368px); }
.sec5 .hed{ text-align: center; }
.sec5 .hed h2{ font-size: 42px; font-weight: 600; color: #354b7a; margin-bottom: 15px; }
.sec5 .link{ text-decoration: none; font-weight: 600; color: #3e7ec6; display: inline-flex; align-items: center; column-gap: 15px; transition: all 0.3s; }

.contact_img{ margin-bottom: 60px; }
.contact_img img{ width: 250px; }

.footer{ background-color: #22252a; color: #ccc; text-align: center; padding: 8px 15px; }

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

    
    .hero_bnr .img{ width: 100%; height: 60%; -webkit-mask-image: linear-gradient(180deg, black 60%, transparent); }
    .hero_bnr .container{ align-items: end; }
    .hero_bnr .container .txt{ width: 100%; margin-left: 15px; margin-bottom: 0; padding-bottom: 25px; }
    .hero_bnr .container .txt h2{ font-size: 22px; }
    .hero_bnr .container .txt h3{ font-size: 16px; }  

    .sec1 .hed h2{ font-size: 30px; }
    .p_ic, .s_ic{ flex-direction: column; align-items: center; row-gap: 15px; }
    .p_ic .txt, .s_ic .txt{ transform: inherit; position: relative; top: auto; left: auto; right: auto; }
    .ps_wrap::before,.ps_wrap .list.left_arr::after{ display: none; }
    .ps_wrap .p_sec, .ps_wrap .s_sec{ width: 100%; }
    .ps_wrap .list.right_arr::after{ display: none; }
    .ps_wrap .list:not(:first-child){ margin-top: 10px; }
    .ps_wrap .list.right_arr::before, .ps_wrap .list.left_arr::before{ display: none; }
    .ps_wrap > div:nth-child(3){ order: 1; margin-top: 30px;  }

    /* .sec2{ padding: 35px 0px 15px; } */
    .sec2 .hed h2{ font-size: 28px; }
    .sec2 .sec2_wrap{ padding: 20px; }
    .sec2 .sec2_wrap .row{ row-gap: 35px; }

    .sec3 .our_solution_wrap{ position: relative; flex-direction: column; height: auto;  }
    .sec3 .our_solution_wrap .li.li1 .p{ padding: 15px 0 35px; margin-right: auto; margin-left: 57px; text-align: left; } 
    .sec3 .our_solution_wrap .li.li1 .p::before{ border:0; }
    .sec3 .our_solution_wrap .li.li1 .p::after{ bottom: auto; top: 0; right: auto; left: 0; }
    .sec3 .our_solution_wrap .li .p::after, .sec3 .our_solution_wrap .li .p::before{ display: none; }
    .sec3 .our_solution_wrap .li.li1 .ttl .num{ order: -1; border-left: 0; border-right: #bbb solid 1px; padding-right: 15px; }
    .sec3 .our_solution_wrap .li.li3 .p{ padding-bottom: 35px; }
    .sec3 .our_solution_wrap .li.li4 .p{ padding-bottom: 0; }

    .sec3 .hed h2{ font-size: 30px; }
    .sec3 h3{ font-size: 26px; text-align: center; margin-bottom: 30px; }
    .sec3 .our_solution_wrap .key{ display: none; }
    .sec3 .our_solution_wrap .li{ width: 100%; position: relative; top: auto !important; left: auto !important; bottom: auto !important; }
    .sec3 .our_solution_wrap .li{ width: 100% !important; position: relative !important; top: auto !important; left: auto !important; bottom: auto !important; }
    .sectio.sec3{ margin:"";}
 

    .sec4 .hed h2{ font-size: 24px; }
    .sec4 .row [class*="col-"]:not(:first-child){ border-left: 0; border-top: #ffffff25 solid 1px; margin-top: 25px; padding-top: 25px; }
    .sec4 .row [class*="col-"]:nth-child(1), .sec4 .row [class*="col-"]:nth-child(2), .sec4 .row [class*="col-"]:nth-child(3){ border-bottom:0; }

    .p_ic, .s_ic{ margin: 20px 0; }

}

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

    .header.in_hed{ position: fixed; }

    .hdr{ margin-top: 78px; }

    .mainmenu{ display: flex; justify-content: flex-end; flex: 1; }

    label[for='mmenu'].opn{ display: flex; align-items: center; margin: 0; color: #fff; height: 100%; }
    label[for='mmenu'].opn span{ font-size: 38px; }

    .log{ margin-right: 0; }

    #mmenu:checked ~ .header .mainmenu label[for='mmenu'].cls{ display: block; margin: 0; color: #fff; position: fixed; top: 0; right: 0; padding: 15px; z-index: 1; }
    #mmenu:checked ~ .header .mainmenu label[for='mmenu'].cls span{ font-size: 38px; }
    #mmenu:checked ~ .header .mainmenu ul{ transform: scale(1); }
    
    .mainmenu ul{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; flex-direction: column; justify-content: center; align-items: center; background: #354b7a; transform: scale(0); transition: all 0.3s; }
    .mainmenu ul li{ width: 80%; text-align: center; }
    .mainmenu ul li a{ font-size: 24px; padding: 18px 16px; }

}

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

    .hero_bnr .img{ width: 100%; height: 60%; -webkit-mask-image: linear-gradient(180deg, black 60%, transparent); }
    .hero_bnr .container{ align-items: end; }
    .hero_bnr .container .txt{ width: 100%; margin-left: 15px; padding-bottom: 25px; }
    .hero_bnr .container .txt h2{ font-size: 28px; }
    .hero_bnr .container .txt h3{ font-size: 24px; }

    .ps_wrap .list.left_arr::before{ right: calc(100% + 18px); }
    .ps_wrap .list.right_arr::before{ left: calc(100% + 20px); }

    .p_ic img, .s_ic img{ width: 50px; }
    .p_ic .txt{ left: 5px; }
    .s_ic .txt{ right: 5px; }

    /* .sec3 .our_solution_wrap .li{ width: 245px; }
    .sec3 .our_solution_wrap .li.li1 .p{ margin-right: 44px; padding: 15px 0 73px; }
    .sec3 .our_solution_wrap .li.li2{ bottom: 23px; left: 213px; width: 235px; }
    .sec3 .our_solution_wrap .li.li3{ left: 345px; }
    .sec3 .our_solution_wrap .li.li3 .p{ padding-bottom: 145px; }
    .sec3 .our_solution_wrap .li.li4{ width: 223px; bottom: 25px; }
    .sec3 .our_solution_wrap .li.li4 .p::before{ height: 70%; } */

    .sec3 .our_solution_wrap{ position: relative; flex-direction: column; height: auto;  }
    .sec3 .our_solution_wrap .li.li1 .p{ padding: 15px 0 35px; margin-right: auto; margin-left: 57px; text-align: left; } 
    .sec3 .our_solution_wrap .li.li1 .p::before{ border:0; }
    .sec3 .our_solution_wrap .li.li1 .p::after{ bottom: auto; top: 0; right: auto; left: 0; }
    .sec3 .our_solution_wrap .li .p::after, .sec3 .our_solution_wrap .li .p::before{ display: none; }
    .sec3 .our_solution_wrap .li.li1 .ttl .num{ order: -1; border-left: 0; border-right: #bbb solid 1px; padding-right: 15px; }
    .sec3 .our_solution_wrap .li.li3 .p{ padding-bottom: 35px; }
    .sec3 .our_solution_wrap .li.li4 .p{ padding-bottom: 0; }

    .sec3 .hed h2{ font-size: 30px; }
    .sec3 h3{ font-size: 26px; text-align: center; margin-bottom: 30px; }
    .sec3 .our_solution_wrap .key{ display: none; }
    .sec3 .our_solution_wrap .li{ width: 100%; position: relative; top: auto !important; left: auto !important; bottom: auto !important; }
    .sec3 .our_solution_wrap .li{ width: 100% !important; position: relative !important; top: auto !important; left: auto !important; bottom: auto !important; }
    .sectio.sec3{ margin:"";}
    
    .sec3 h3{ font-size: 34px; }

    .sec4 .row [class*="col-"]:nth-child(even){ border-left: #ffffff25 solid 1px; }
    .sec4 .row [class*="col-"]:nth-child(odd){ border-left: #ffffff25 solid 0px; }
    .sec4 .row [class*="col-"]:nth-child(4){ border-bottom: #ffffff25 solid 1px; }

}

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

    .hero_bnr .container .txt h2{ font-size: 26px; }
    .hero_bnr .container .txt h3{ font-size: 18px; }

    .ps_wrap .list.left_arr::before{ right: calc(100% + 18px); }
    .ps_wrap .list.right_arr::before{ left: calc(100% + 20px); }

    .sec3 .our_solution_wrap .li.li2{ left: 293px; bottom: -4px; width: 640px; }

    .sec3 .our_solution_wrap .li.li3{ left: 434px; width: 515px; top: -32px; }
    /* .sec3 .our_solution_wrap .li.li3 .p{ padding-bottom: 130px; } */

    .sec3 .our_solution_wrap .li.li4{ width: 294px; bottom: 64px; }
    

}