/***TOP BANNER***/
.top-banner{
    z-index:9;
}
.top-banner .maintitle{
    color:var(--primary);
    line-height: 1;
}
.top-banner .subtitle{
    text-align:center;
    color:var(--primary);
}
.top-banner .sp-main{
    font-size:var(--font-size--big)
}
.top-banner .sp-main>span{
    font-weight:900;
    display:flex;
    gap:8px;
    align-items: center;
}
.top-banner .sp-main .sp-1::after{
    content: "";
    height: 65px;
    width:fit-content;
    background-image: url("/wp-content/uploads/2026/03/angle.svg");
    background-position: left bottom;
    background-size: cover;
    background-repeat:no-repeat;
    min-width: 40%;
    margin-right: -15%;
}
.top-banner .sp-main .sp-2::before{
    content: "";
    height: 65px;
    width:fit-content;
    background-image: url("/wp-content/uploads/2026/03/angle.svg");
    background-position: left center;
    background-size: cover;
    background-repeat:no-repeat;
    min-width: 35%;
    margin-left: -15%;
    transform: scale(-1);
}
.top-banner .btn-col{
    display:flex;
    gap: 20px;
    align-items:center;
    justify-content:center
}
.top-banner .btn-col .btn{
    flex-grow:1;
    max-width:225px;
    font-size:clamp(18px, 2vw, 24px)
}
.top-banner .img-col{
    display:flex;
    align-items: flex-start;
}
.top-banner .img-col>img,
.top-banner .img-col>picture{
    width:50%
}
.top-banner .list-col{
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF00 100%);
    border-radius: 18px;
    padding: 26px;
}
.top-banner .li-col{
    display:flex;
    align-items:center;
    gap:12px;
    position:relative;
    padding: 12px 0;
}
.top-banner .li-col:not(:last-child)::after{
    content:"";
    height:1px;
    width:110%;
    background-color:var(--secondary);
    position:absolute;
    bottom:0;
    left:-10px
}
.top-banner .li-col:first-child{
    padding-top:0
}
.top-banner .li-col:last-child{
    padding-bottom:0
}
.top-banner .li-col .title{
    color:var(--primary);
    margin:0;
}
.top-banner .li-col .icon svg{
    width:50px
}
@media(min-width:1501px){
    .top-banner .img-col{
        width:70%;
        margin-right:-20%
    }
    .top-banner .list-col{
        width: 70%;
        margin-right: -30%;
        padding-right: 31%;
    }
}
@media(min-width:1201px){
    .section.top-banner{
        padding-top:calc(12% + 32px);
        padding-bottom:calc(5% + 32px)
    }
}
@media(min-width:1025px){
    .top-banner .img-col>img,
    .top-banner .img-col>picture{
        margin-top:-15%;
    }
}
@media(min-width:801px){
    .section.top-banner {
        background-image:url(/wp-content/uploads/2026/03/top-banner-bg.png);
        background-position:top center;
        background-size:cover;
        background-repeat:no-repeat;
    }
    .top-banner .title-col{
        width:50%
    }
    .top-banner .img-col{
        padding-left:5%;
    }
}
@media(max-width:1500px) and (min-width:1025px){
    .top-banner .img-col{
        width:60%;
        margin-right:-10%
    }
    .top-banner .list-col{
        width: 78%;
        margin-right: -30%;
        padding-right: 31%;
    }
}
@media(max-width:1360px) and (min-width:801px){
    .top-banner .maintitle{
        max-width:460px;
        margin-right:auto;
        margin-left:auto
    }
}
@media(max-width:1200px) and (min-width:1025px){
    .section.top-banner{
        padding-top:calc(15% + 32px);
        padding-bottom:calc(15% + 32px)
    }
    .top-banner .title{
        font-size:15px
    }
}
@media(max-width:1024px) and (min-width:801px){
    .section.top-banner{
        padding-top:70px;
        padding-bottom:100px
    }
    .top-banner .img-col{
        width:60%;
    }
    .top-banner .title-col{
        width:40%
    }
    .top-banner .list-col{
        width: 78%;
        margin-right: -30%;
        padding-right: 25%;
    }
    .top-banner .title{
        font-size:15px
    }
    .top-banner .img-col>img,
    .top-banner .img-col>picture{
        z-index:9
    }
}
@media(max-width:800px){
    .top-banner{
        background:var(--gradient);
        padding-top:32px
    }
    .top-banner .maintitle,
    .top-banner .subtitle{
        color:var(--white)
    }
    .top-banner .maintitle{
        max-width:325px;
        margin-right:auto;
        margin-left:auto;
        text-align:center
    }
    .top-banner .title-col{
        padding-bottom:32px
    }
    .top-banner .img-col{
        width:100%;
        align-items:center;
    }
    .top-banner .sp-main>span{
        justify-content:center;
    }
}
@media(max-width:500px) and (min-width:401px){
    .top-banner .list-col{
        width:100%;
        padding-right:35%
    }
    .top-banner .img-col{
        flex-wrap:wrap;
        justify-content: flex-end;
    }
    .top-banner .img-col>img,
    .top-banner .img-col>picture{
        margin-top: -40%;
        margin-right:-5%;
        z-index:9
    }
    .top-banner .title{
        font-size:15px
    }
}
@media(max-width:400px){
    .top-banner .list-col{
        width:100%;
    }
    .top-banner .img-col{
        flex-wrap:wrap;
        justify-content: center;
        gap:12px
    }
    .top-banner .title{
        font-size:14px
    }
}
@media(max-width:1500px) and (min-width:1025px){
    .section.top-banner{
        padding-top:230px
    }
}
/***SERVICES***/
section.services-sctn {
    padding-top:32px;
    padding-bottom:clamp(32px, 6%, 100px)
}
.services-sctn .section-wrap{
    gap:32px
}
.services-sctn .maintitle{
    color:var(--primary);
    margin-bottom:8px
}
.services-sctn .subtitle{
    color:var(--secondary)
}
.services-sctn .service-col{
    padding-left:20px;
    border-left:2px solid var(--secondary)
}
.services-sctn .title{
    color:var(--primary);
    margin-bottom:8px
}
.services-sctn .service-col p{
    margin:0
}
@media(min-width:801px){
    .services-sctn .service-col{
        width:calc(33% - 20px)
    }
}
@media(max-width:800px){
    .services-sctn .title-col{
        text-align:center;
    }
    .services-sctn .subtitle{
        margin-bottom:0
    }
}
@media(max-width:800px) and (min-width:501px){
    .services-sctn .service-col{
        width:calc(50% - 20px)
    }
}
@media(max-width:500px){
    .services-sctn .service-col{
        width:100%
    }
}
/***CTA BANNER***/
.cta-banner{
    background:var(--gradient2);
    padding-top:32px;
    padding-bottom:32px;
    color:var(--white);
}
.cta-banner .maintitle{
    font-size:clamp(20px, 2.4vw, 31px)
}
.cta-banner .btn-col {
    display:flex;
    align-items:center
}
.cta-banner .btn-col .btn{
    flex-grow:1;
    font-size:clamp(20px, 2.5vw, 29px)
}
.cta-banner .title-col{
    display:flex;
    align-items:center
}
.cta-banner .maintitle .sp-main{
    display:block
}
@media(min-width:601px){
    .cta-banner .maintitle{
        margin-bottom:0
    }
    .cta-banner .title-col{
        width:calc(100% - 260px);
        padding-right:12px;
    }
    .cta-banner .btn-col{
        width:260px;
    }
}
@media(max-width:600px){
    .cta-banner .maintitle{
        margin-bottom:8px;
        text-align:center
    }
    .cta-banner .title-col{
        width:100%
    }
    .cta-banner .btn-col{
        width:100%;
        justify-content:center;
    }
    .cta-banner .btn-col .btn{
        max-width:300px
    }
}
/***ABOUT***/
.section.about-sctn {
    padding-top:clamp(32px, 6%, 120px);
    padding-bottom:clamp(32px, 6%, 120px)
}
.about-sctn .maintitle{
    color:var(--primary);
    margin-bottom:8px
}
.about-sctn .subtitle {
    color:var(--secondary)
}
.about-sctn .btn-col{
    width:100%;
    display:flex;
    gap:16px;
    align-items:center
}
.about-sctn .btn-col .btn{
    max-width:191px;
    flex-grow:1
}
.about-sctn .img-col{
    border-radius: 36px;
    display:flex;
    flex-wrap:wrap;
    position:relative;
    overflow:hidden;
}
.about-sctn .img-col>img:not(.logo),
.about-sctn .img-col>picture:not(.logo){
    height:100%;
    width:100%;
    object-fit:cover
}
.about-sctn .img-col .logo{
    position:absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin:auto;
    top: 0;
    width:80%
}
.about-sctn .maintitle .sp-main{
    display:block;
    font-size:clamp(22px, 2.6vw, 32px);
    color:var(--secondary)
}
@media(min-width:801px){
    .about-sctn .text-col{
        width:50%
    }
    .about-sctn .img-col{
        width:45%;
        margin-left:auto
    }
}
@media(max-width:800px){
    .about-sctn .text-col{
        width:100%;
        text-align:center;
        padding-bottom:32px
    }
    .about-sctn .btn-col{
        justify-content:center;
    }
    .about-sctn .img-col{
        width:100%;
        max-width:500px
    }
}
/***WHY US***/
.section.whyus-sctn {
    text-align:center;
    padding-top:clamp(32px, 6%, 100px);
    padding-bottom:clamp(32px, 6%, 100px);
	background: var(--gradient2);
    color: var(--white);
}
.whyus-sctn .section-wrap{
    gap:32px;
    justify-content:space-evenly
}
.whyus-sctn .maintitle{
    color:var(--white);
}
.whyus-sctn .title-col{
    width:100%
}
.whyus-sctn .subtitle{
    color: #bfd5de;
    margin-bottom: 12px;
    font-weight: 500;
}
@media(min-width:801px){
    .whyus-sctn .whyus-col{
        width:calc(33% - 32px)
    }
}
@media(min-width:501px){
    .whyus-sctn .whyus-col img{
        height:120px;
        object-fit:contain
    }
    .whyus-sctn .maintitle .sp-main{
        display:block
    }
}
@media(max-width:800px) and (min-width:501px){
    .whyus-sctn .whyus-col{
        width:calc(50% - 32px)
    }
    .whyus-sctn .title-col img{
        max-width:230px
    }
}
@media(max-width:500px){
    .whyus-sctn .title-col img{
        max-width:150px
    }
    .whyus-sctn .whyus-col{
        width:100%;
		padding-bottom:32px
    }
    .whyus-sctn .section-wrap{
        gap:20px
    }
    .whyus-sctn .whyus-col p{
        margin:0
    }
}
.whyus-sctn .num p {
    color: var(--white);
    margin-bottom: 0;
    line-height: 1;
    font-size: 80px;
    font-family: var(--font-family--h1);
    font-weight:900;
}
.whyus-sctn .num {
    background-color: var(--primary);
    padding: 10px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 10px solid var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
    margin-right:auto;
    margin-left:auto;
}
.whyus-sctn .num::after {
    content: "";
    width: 170px;
    height: 170px;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #bfd5de;
}
@media(max-width:500px){
    .whyus-sctn .num p {
        font-size:50px
    }
    .whyus-sctn .num{
        width: 100px;
        height: 100px;
        border: 4px solid var(--secondary);
    }
    .whyus-sctn .num::after {
        width: 110px;
        height: 110px;
        border: 1px solid #bfd5de;
    }
}
/***FAQ***/
.section.faq-sctn {
    padding-top:clamp(32px, 6%, 100px);
    padding-bottom:clamp(32px, 6%, 100px)
}
.faq-sctn .maintitle{
    font-weight:400;
    color:Var(--primary);
    font-size: clamp(26px, 3.6vw, 58px);
}
.faq-sctn .maintitle .sp-main{
    font-weight:900;
    display:block
}
.faq-sctn details h4{
    font-family:var(--font-family--h1);
    margin:0;
    color:Var(--primary);
    font-weight:700;
    font-size:clamp(16px, 1.9vw, 20px)
}
.faq-sctn details{
    border-bottom:1px solid var(--secondary);
    margin-bottom: 15px;
    padding-bottom: 12px;
}
@media(min-width:801px){
    .faq-sctn .section-wrap{
        align-items:center
    }
    .faq-sctn .maintitle{
        margin:0
    }
    .faq-sctn .title-col{
        width: calc(35% - 32px);
        margin-right:auto;
        border: 2px solid var(--secondary);
        border-radius: 19px;
        padding:32px;
    }
    .faq-sctn .faq-col{
        width: 65%;
    }
}
@media(max-width:800px){
    .faq-sctn .title-col{
        width:100%;
        text-align:Center
    }
    .faq-sctn .faq-col{
        width:100%
    }
}
/***CONTACT***/
.section.contact-sctn {
    padding-top:clamp(32px, 6%, 100px);
    padding-bottom:clamp(32px, 6%, 100px);
    text-align:center;
}
.contact-sctn .maintitle{
    font-size: clamp(18px, 3vw, 36px);
    width:100%;
    color:var(--white)
}
.contact-sctn .sp-main{
    display:block;
}
.contact-sctn .form-col{
    background-color: var(--white);
    box-shadow: 0px 0px 49px #032F006B;
    border-radius: 15px;
    width:100%;
    max-width:890px;
}
@media(min-width:801px){
    .section.contact-sctn {
        background-image:url(/wp-content/uploads/2026/03/contact-bg.jpg);
        background-position:center;
        background-repeat:no-repeat;
        background-size:cover;
    }
    .contact-sctn::after{
        content:"";
        height:100%;
        width:100%;
        position:absolute;
        top:0;
        left:0;
        background: linear-gradient(179deg, #000067 0%, #0282C4 59%, #BFDFF000 100%);
        z-index:1
    }
    .contact-sctn .section-wrap{
        z-index:9
    }
    .contact-sctn .form-col{
        padding:44px 32px
    }
}
@media(max-width:800px){
    .section.contact-sctn {
        background:var(--gradient2)
    }
    .contact-sctn .form-col{
        padding:32px 20px
    }
}