.invoice-detail {
	margin: 40px auto;
	width: 100%;
}

.invoice-detail>h1{
        font-family: Ford Antenna;
        font-weight: 600;
        font-size: 44px;
        line-height: 1.4;
        letter-spacing: 2.5px;
        text-shadow: 8px 12px 24px 0px #0000000D;
        text-align: center;

}
.invoice-detail>.description{
        box-shadow: 0px 20px 40px 0px #D2D6E580;
        padding: 40px;
        padding-right: 160px;
        border-radius: 12px;
        background: url(images/bg-right.png) no-repeat top right #fff;
        background-size: 80px;
        display: flex;
        gap: 30px;
        width: 1120px;
        margin: 0 auto;
        z-index: 1;
        position: relative;
}
.invoice-detail>.description>.left-zone{
        width: 111px;
        height: 111px;
        border-radius: 50%;
        background: #1F99FF;
        flex-shrink: 0;
        position: relative;
}
.invoice-detail>.description>.left-zone>.alias{
        font-family: Ford Antenna;
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0.5px;
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
            transform: translate(-50%,-50%);
}
.invoice-detail>.description>.right-zone *{
        font-family: Google Sans;
        font-weight: 400;
        font-size: 18px;
        line-height: 28px;
        letter-spacing: 0.5px;
        text-align: justify;
        color: #2E2E2E;
}
.invoice-detail>.description>.right-zone strong{
        font-weight: 700;
}
.invoice-detail>.feature{
        margin-top: 40px;
        background: #F5FAFD;
        width: 1300px;
        margin: 0 auto;
        margin-top: -100px;
        padding: 180px 90px;
        padding-bottom: 40px;
}
.invoice-detail>.feature>h2{
        font-family: Ford Antenna;
        font-weight: 600;
        font-size: 32px;
        line-height: 100%;
        margin-bottom: 40px;
        text-transform: uppercase;
}
.invoice-detail>.feature>.content{
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
}
.invoice-detail>.feature>.content>.template{
        box-shadow: 0px 0px 30px 0px #D2D6E54D;
        border-radius: 12px;
        padding: 40px;
        background: url(images/icon-top.png) no-repeat top right #ffffff;
        background-position-x: 95%;
        background-position-y: 40px;
}
.invoice-detail>.feature>.content>.template>p:first-child{
        padding-right: 50px;
        text-align: left;
}
.invoice-detail>.feature>.content>.template *{
        max-width: 100%;
}
.invoice-detail > .feature > .content > .template[data-column-taking="1"]  { width: calc((100% - 40px) / 12 * 1); }
.invoice-detail > .feature > .content > .template[data-column-taking="2"]  { width: calc((100% - 40px) / 12 * 2); }
.invoice-detail > .feature > .content > .template[data-column-taking="3"]  {width: calc((100% - 40px) / 12 * 3);/* background: #fff; */}
.invoice-detail > .feature > .content > .template[data-column-taking="4"]  { width: calc((100% - 40px) / 12 * 4); }
.invoice-detail > .feature > .content > .template[data-column-taking="5"]  { width: calc((100% - 40px) / 12 * 5); }
.invoice-detail > .feature > .content > .template[data-column-taking="6"]  { width: calc((100% - 40px) / 12 * 6); }
.invoice-detail > .feature > .content > .template[data-column-taking="7"]  { width: calc((100% - 40px) / 12 * 7); }
.invoice-detail > .feature > .content > .template[data-column-taking="8"]  { width: calc((100% - 40px) / 12 * 8); }
.invoice-detail > .feature > .content > .template[data-column-taking="9"]  { width: calc((100% - 40px) / 12 * 9); }
.invoice-detail > .feature > .content > .template[data-column-taking="10"] { width: calc((100% - 40px) / 12 * 10); }
.invoice-detail > .feature > .content > .template[data-column-taking="11"] { width: calc((100% - 40px) / 12 * 11); }
.invoice-detail > .feature > .content > .template[data-column-taking="12"] { width: 100%; }
.invoice-detail .button-group{
        display: flex;
        justify-content: center;
        gap: 40px;
        margin: 40px 0;
}
.invoice-detail .button-group >.view-package,
.invoice-detail .button-group >.register-now{
        border: 1px solid #535353;
        border-radius: 200px;
        padding: 10px 40px;
        width: 400px;
        font-family: Google Sans;
        font-weight: 500;
        font-size: 17px;
        line-height: 22px;
        text-align: center;
        text-transform: uppercase;
        color: #535353;
        background: #ffffff;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.invoice-detail .button-group >.register-now{
        background: #0C5ADB;
        color: #fff;
        border: 0;
}
.invoice-detail .button-group >.view-package:after,
.invoice-detail .button-group >.register-now:after{
        content: '\f178';
        font-family: 'Font Awesome 5 Pro';
        padding-left: 5px;
}
.invoice-detail .button-group >.view-package:hover{
         transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.invoice-detail .button-group >.register-now:hover{
         transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 768px){
        .invoice-detail{
                width: 100vw;
                padding: 0 20px;
                margin: 20px 0;
        }
      .invoice-detail>.description, 
        .invoice-detail>.feature{
              width: 100%;
              padding: 20px;
              flex-direction: column;
      }  
        .invoice-detail>.feature{
                margin-top: 20px;
                background: #ffffff;
                padding: 0;
        }
        .invoice-detail>h1{
                font-size: 24px;
        }
        .invoice-detail>.feature>h2{
                font-size: 22px;
                text-align: center;
                margin-bottom: 20px;
        }
        .invoice-detail>.feature>.content>.template{
                width: 100% !important;
                padding: 20px;
                background-position-y: 20px;
                background-image: none;
        }
        .invoice-detail .button-group{
                flex-direction: column-reverse;
                gap: 20px;
        }
        .invoice-detail .button-group>a{
                width: 100% !important;
        }
        .invoice-detail>.feature>.content{
                gap: 20px;
        }
        .invoice-detail>.feature>.content>.template>p:first-child{
                padding: 0;
        }
}