@import 'partials';
.apply-for-wrap{padding: 100px 0; background: url(../img/apply-bg.png) no-repeat top center / 100% auto;
    @media ($sm-1679){ padding: 70px 0;}
    @media ($sm-1441){ padding: 50px 0;}
    @media ($sm-991){ padding: 40px 0;}
    .two-square{display: flex; align-items: center; gap: 10px;
        .square{ background: $primary; transform: rotate(45deg);
            &.one{width: 11px; height: 11px;
                @media ($sm-1199){width: 9px; height: 9px;}
                @media ($sm-991){width: 8px; height: 8px;}
                @media ($sm-479){width: 6px; height: 6px;}
            }
            &.two{width: 17px; height: 17px;
                @media ($sm-1199){width: 15px; height: 15px;}
                @media ($sm-991){width: 14px; height: 14px;}
                @media ($sm-479){width: 12px; height: 12px;}
            }
        }
    }
    .content-wrap{
        .para{color: $dark; font-size: 16px; line-height: 1.6; max-width: 990px; margin: 0 auto; text-align: center; padding-bottom: 40px;
            @media ($sm-1199){font-size: 15px; max-width: 880px; padding-bottom: 20px;}
        }
        .download-application{ display: flex; justify-content: center; padding: 0 0 70px 0;
            @media ($sm-1199){ padding-bottom: 50px;}
            @media ($sm-991){ padding-bottom: 30px;}
            .title{ font-size: 38px; color: $dark; font-weight: normal; margin: 0; padding: 0 20px;
                @media ($sm-1679){font-size: 36px;}
                @media ($sm-1199){ font-size: 34px;}
                @media ($sm-991){ font-size: 32px;}
                @media ($sm-767){width: 340px; text-align: center;}
                @media ($sm-579){font-size: 28px;}
                @media ($sm-479){padding:0 10px; font-size: 24px; width: 70%;}
                span{color: $primary;}
            }
        }
        .box-wrap{ padding-bottom: 80px;
            @media ($sm-1679){ padding-bottom: 60px;}
            @media ($sm-991){ padding-bottom: 40px;}
            @media ($sm-479){ padding-bottom: 20px;}
            .box-content{ text-align: center; border: 1px solid $primary; border-radius: 25px; min-height: 140px; background:$white; display: flex; justify-content: center; flex-direction: column; font-size: 18px; color: $dark; line-height: 1.6; padding: 15px 10px; height: 100%;
                @media ($sm-1679){font-size: 16px;}
                @media ($sm-1199){ min-height: 100px; line-height: 1.4;}                
                @media ($sm-767){font-size: 14px; min-height:80px;}
                @media ($sm-479){border-radius: 20px; font-size: 13px; }
                span{display: block;}
                &.active{border-color: $primary; color:$primary;}
            }
            .align-adj{
                @media ($sm-991){ margin-bottom: 20px;}
            }
        }
    }
    .application-wrap{ background: url(../img/application-img.png) no-repeat bottom center / 100% auto; min-height: 556px; padding: 130px 15px 20px 15px; margin: 0 0 50px 0; border-radius: 30px;
        @media ($sm-1679){min-height: 510px;}
        @media ($sm-1441){min-height: 480px; padding: 70px 15px 20px 15px;}
        @media ($sm-1199){min-height: 408px;}
        @media ($sm-991){min-height: 287px; padding: 30px 15px 20px 15px;}
        @media ($sm-767){background:$primary; padding: 30px 15px; min-height: inherit;}
        @media ($sm-767){ margin-bottom: 30px;}
        .title{color: #FFFFFF; font-size: 62px; font-weight: 400; padding: 0 0 20px 0; line-height: 1.2; max-width: 830px; margin: 0 auto; text-align: center;
            @media ($sm-1679){font-size: 52px;}
            @media ($sm-1199){font-size: 42px;}
            @media ($sm-991){font-size: 35px;}
            @media ($sm-767){font-size: 33px;}
            @media ($sm-579){font-size: 28px; padding-bottom: 10px;}
            @media ($sm-579){font-size: 26px;}
        }
        .para{ font-size: 24px; color: #FFFFFF; text-align: center; line-height: 1.6;
            @media ($sm-1679){font-size:22px;}
            @media ($sm-991){font-size:18px; line-height: 1.4;}
            @media ($sm-767){font-size: 16px;}
            @media ($sm-579){font-size: 14px;}
            span{display: block;}
        }
    }
    .please-contact-wrap{ display: flex; align-items: center; justify-content: center; padding-bottom: 70px;
        @media ($sm-1679){padding-bottom: 50px;}
        @media ($sm-767){padding-bottom: 30px;}
        .title{ font-size: 16px; color: $dark; font-weight: normal; margin: 0; padding: 0 20px;
            @media ($sm-991){text-align: center;}
            @media ($sm-767){font-size: 14px;}
        }
    }
    .apply-info-box{
        .content{border: 1px solid #DCC6E3; border-radius: 30px; background:#FFFFFF; display: flex; align-items: center; justify-content: space-between; min-height: 200px; padding: 0 50px; margin: 0 0 30px 0;
            @media ($sm-1199){margin: 0 0 20px 0;}
            @media ($sm-1679){padding: 0 40px; min-height: 160px;}
            @media ($sm-1199){ padding: 0 20px; min-height: 150px;}
            @media ($sm-767){ min-height: inherit; border-radius: 15px; padding: 30px 15px;}
            .txt{ width: 75%;
                .subtitle{ color:#975FA9; font-size: 24px; font-weight: 700; margin: 0; padding: 0 0 10px 0; line-height: 1.4;
                    @media ($sm-1679){font-size: 22px;}
                    @media ($sm-1199){line-height: 1.2; font-size: 20px;}
                }
                .sub-para{ font-size: 16px; line-height: 1.6; margin: 0; padding: 0;
                    @media ($sm-1679){font-size: 14px;}
                }
            }
            .img{width: 95px;
                @media ($sm-1679){width: 90px;}
                @media ($sm-991){ width: 70px;}
            }
        }
    }
}