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

@font-face {
    font-family:sf-pro-display-Bold;
    src: url('../fonts/sf-pro-display/SF-Pro-Display-Bold.ttf');
}



@font-face {
    font-family:sf-pro-display-light;
    src: url('../fonts/sf-pro-display/SF-Pro-Display-Light.ttf');
}

@font-face {
    font-family:Lato-Bold;
    src: url('../fonts/Lato/Lato-Bold.ttf');
}

@font-face {
    font-family:Lato-Light;
    src: url('../fonts/Lato/Lato-Light.ttf');
}

@font-face {
    font-family:Lato-Regular;
    src: url('../fonts/Lato/Lato-Regular.ttf');
}


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

a {
    text-decoration: none;
    color: #fff;
}


.about-banner {
    width: 100%;
    background-image: url(../image/about-banner-image.jpg);
    background-size: cover;
    background-position: center;
    padding-bottom: 22px;
}

.about-banner h1 {
    color: #fff;
    padding: 102px 0 99px 0;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    -webkit-text-stroke-width: 0.8px;
    letter-spacing: 1.8px;
}

.blue-page {
    width: 100%;
    height:757px;
    border: 7px solid #FFF;
    background: linear-gradient(180deg, #0F4570 0%, #000 100%);
    position: relative;
    top: -45px;
    padding:67px 0px 0 0px ;
}

.blue-page p {
    color: #ffffffd4;
    text-align: center;
    font-family:Lato-Light;
    font-size: 16px;
    line-height: 150%; /* 24px */
    letter-spacing: 0.48px;
    padding-bottom: 183px;

    width: 90%;
    margin: 0 auto;
}

.lap-image{
    width: 527.326px;
    height: 307.135px;
    
    /* bottom: -100px;
    left: 50%;
    transform: translateX(-50%); */
    margin: 160px auto 0 auto;
}


/* mobile view lap  */


.laptop-set-tap {
    color: #FFF;
    font-family:Lato-Regular;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.laptop-set-tap::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 468px;
    background-color: #0D74C5;
    left: 50%;
    top: -352px;
}

.laptop-set-tap h1 {
    font-size: 14.82px !important;
    margin: 0;
}

.sm-cricle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.green-sm {
    background-color: #bb2533;
    top: -46px;
}

.blue-sm {
    background-color: #b15407;
    top: -152px;
}


.orange-sm {
    background-color: #0776a7;
    top: -260px;
}

.red-sm {
    background-color: #69932C;
    top: -363px;
}

.content-box::after {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 9px solid transparent;
    content: "";
    right: -13px;
    top: 11px;
    transform: rotate(-1deg);
}

.Admission {
    background: #bb2533;
    left: -11px;
    top: -39px;
    padding: 10px 0px;
    width: 135px;
}

.Admission::after{
    border-left: 14px solid #bb2533;
}

.Evidence {
    left: -11px;
    top: -143px;
    padding: 10px 0px;
    width: 135px;
    background:  #b15407;
}

.Evidence::after {
    border-left: 14px solid  #b15407;
}

.Identification {
    left: -11px;
    top: -254px;
    padding: 10px 0px;
    width: 135px;
    background: #0776a7;
}

.Identification::after {
    border-left: 14px solid #0776a7;
}

.Acquisition {
    left: -11px;
    top: -356px;
    padding: 10px 0px;
    width: 135px;
    background: #69932C;
}

.Acquisition::after {
    border-left: 14px solid #69932C;
}

.content-box {
    text-align: center;
}















 /* mobile view lap   */





.round {
    width: 147.688px;
    height: 147.688px;
    border-radius: 50%;
    border: 8px solid #fff;
    position: absolute;
}

.round::after {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-left: 14px solid #fff;
    border-bottom: 9px solid transparent;
    content: "";
}

.red-round {
    background-color: #BB2533;
    bottom: 120px;
    left: -180px;
}

.red-round::after {
    right: -21px;
    top: 43%;
}

.orange-round {
    background-color: #B15407;
    top: -164px;
    left: 12px;

}

.orange-round::after {
    right: 21px;
    bottom: -10px;
    transform: rotate(45deg);
}

.blue-round {
    background-color: #0776A7;
    top: -164px;
    left: 364px;
}

.blue-round::after {
    right: 95px;
    bottom: -11px;
    transform: rotate(126deg);
}

.green-round{
    background-color:
    #69932C;
    bottom: 120px;
    left: 563px;
}

.green-round::after {
    top: 46%;
    left: -18px;
    transform: rotate(62deg);
}

.round h6 {
    color: #FFF;
    font-family:Lato-Regular;
    font-size: 14.82px;
    text-transform: uppercase;
    margin: 0;
}

.context {
    position: absolute;
    top: -266px;
    left: 93px;
}

.context-set {
    gap: 6px;
}

.Physical {
    color: #fff;
    text-align: center;
    font-size: 12.012px;
    line-height: 110%;
    letter-spacing: 0.33px;
    text-transform: uppercase;
    flex-direction: column;
    gap: 6px;
    font-family: Lato-Light;
}

.sm-line::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 14px;
    background-color: #fff;
    bottom: -18px;
}

.Physical button {
    color: #FFF;
    text-align: center;
    font-family: sf-pro-display-light;
    font-size: 11.833px;
    letter-spacing: 0.235px;
    border: none;
    border-radius: 3.826px;
    background: #B15407;
    padding: 2px 5px;
}

.yellow {
    background-color: #D3A018 !important;
}

.blue {
    background-color: #0776A7 !important;
}

.arrow {
    width: 36px;
}

.big-arrow {
    width: 24px;
    height: 91px;
    margin-top: 10px;
}

.long-arrow {
    height: 100%;
}

.block-color-box {
    width: 100%;
    border: 1px solid #FFF;
    background: linear-gradient(0deg, #0F4570 -90.17%, #000 100%);
    margin-top: 80px;
    border-left:7px solid #fff;
    border-right:7px solid #fff
}

.block-color-box p {
    color: #fffffff7;
    font-family:Lato-Light;
    font-size: 16px;
    line-height: 150%; 
    letter-spacing: 0.48px;
    padding: 29px 22px 42px 22px;
    margin: 0;
}


/* responsive start  */

@media (max-width: 1273px) {
    .blue-page {
        height: 754px;
    }
}

@media (max-width: 1064px) {
    .blue-page {
        height: 781px;
    }
}

@media (max-width:991px) {
    .lap-image {
        width: 423.326px;
    }

    .blue-page {
        height: 728px;
    }

    .round {
        width: 120.688px;
        height: 120.688px;
        border: 6px solid #fff;
    }

    .round h6 {
        font-size: 12.82px;
    }

    .red-round::after {
        right: -18px;
    }

    .green-round::after {
        left: -16px;
    }

    .blue-round::after {
        right: 96px;
        bottom: 3px;
    }

    .red-round {
        bottom: 158px;
        left: -154px;
    }

    .green-round {
        bottom: 159px;
        left: 457px;
    }

    .orange-round {
        top: -133px;
        left: 12px;
    }

    .blue-round {
        top: -134px;
        left: 310px;
    }

    .context {
        top: -242px;
        left: 63px;
    }
}

@media (max-width:991px) {
    .blue-page {
        height: 768px;
    }
}

@media (max-width:833px) {
    .lap-image {
        width: 355.326px;
        z-index: 1;
    }

    .blue-page {
        height: 771px;
    }

    .round {
        width: 100.688px;
        height: 100.688px;
        border: 4px solid #fff;
    }

    .round h6 {
        font-size: 10.82px;
    }

    .red-round {
        bottom: 180px;
        left: -133px;
    }

    .green-round {
        bottom: 181px;
        left: 392px;
    }

    .red-round::after {
        right: -17px;
    }

    .green-round::after {
        left: -14px;
    }

    .orange-round {
        top: -115px;
    }

    .orange-round::after {
        right: 9px;
        bottom: -8px;
        transform: rotate(61deg);
    }

    .blue-round {
        top: -115px;
        left: 259px;
    }

    .blue-round::after {
        right: 75px;
        bottom: -5px;
    }

    .Physical {
        font-size: 10.012px;
    }

    .context-set {
        gap: 23px;
        flex-direction: column;
    }

    .context {
        top: -262px;
        left: 332px;
    }

    .blue-page p {
        padding-bottom: 136px;
    }

    .laptop-set {
        display: none;
    }

    .laptop-set-tap {
        display: block !important;
    }

    .lap-image {
        margin: 297px auto 0 auto;
    }

     .big-arrow{
        width: 125px;
        height: 15px;
        margin-top: 10px;
        position: absolute;
        top: -149px;
        right: -4px;
    }

    .top-arrow {
        width: 125px;
        height: 15px;
        margin-top: 10px;
        position: absolute;
        top: -250px;
        right: 59px;
        transform: rotate(180deg);
        

        
        
    }
}
@media (max-width:768px) {
    .about-banner h1 {
        text-align: center;
    }
}

@media (max-width:799px) {
    .blue-page {
        height: 780px;

    }
}

@media (max-width:724px) {
    .blue-page {
        height: 798px;
    }
}

@media (max-width:676px) {
    .blue-page {
        height: 828px;
    }
    }


@media (max-width:600px) {
    .blue-page {
        height: 843px;
    }

    .blue-page p {
        width: 95%;
    }

    .blue-page-full {
        padding: 0 !important;
    }

    .blue-page {
        padding: 41px 0px 0 0px;
    }

    .Physical {
        color: #fff;
        text-align: center;
        font-family: Lato-Light;
        font-size: 11.012px;
        line-height: 110%;
        letter-spacing: 0.33px;
        text-transform: uppercase;
        flex-direction: column;
        gap: 6px;
    }

    .Physical button {
         color: #FFF;
        text-align: center;
        font-family: sf-pro-display-light;
        font-size: 10.833px;
        letter-spacing: 0.235px;
        border: none;
        border-radius: 3.826px;
        background: #B15407;
        padding: 3px 5px; 
    }

}

@media (max-width:576px) {
    .laptop-set-tap h1 {
        font-size: 12.82px !important;
        letter-spacing: 1px;
    }

    .sm-cricle {
        width: 35px;
        height: 35px;
    }

    .lap-image {
        width: 281.326px;
    }

    .Admission br {
        display: block !important;
    }

    .green-sm {
        top: -66px;
    }

    .blue-sm {
        top: -161px;
    }

    .orange-sm {
        top: -306px;
    }

    .Admission {
        left: -35px;
        top: -68px;
    }

    .Evidence {
        left: -35px;
        top: -160px;
    }

    .Identification {
        left: -35px;
        top: -305px;
    }

    .Acquisition {
        left: -35px;
        top: -402px;
    }

    .red-sm {
        top: -402px;
    }

    .laptop-set-tap::after {
        top: -377px;
    }

    .context {
        top: -313px;
        left: 262px;
    }

    .big-arrow {
        width: 99px;
        top: -167px;
        right: 0px;
    }

    .top-arrow {
        width: 99px;
        top: -301px;
        right: 39px;
    }

}

@media (max-width: 517px) {
    .blue-page {
        height: 844px;
    }

    
}

@media (max-width: 488px) {
    .blue-page {
        height: 839px;
    }
}

@media (max-width: 458px) {
    .blue-page {
        height: 850px;
    }
}

@media (max-width: 426px) {
    .blue-page {
        height: 868px;

    }

    .Admission {
        left: -29px
    }

    .Evidence {
        left: -29px
    }

    .Identification {
        left: -29px
    }

    .Acquisition {
        left: -29px
    }

     .top-arrow {
        top: -295px;
        right: 72px;
        height: 9px;

    }

    .big-arrow {
        top: -166px;
        right: 7px;
        height: 9px;
    }

    .context {
        top: -316px;
        left: 226px;
    }


   
}

@media (max-width: 415px) {
    .blue-page {
        height: 888px;
    }
}

@media (max-width: 388px) {
    .blue-page {
        height: 883px;
    }

    .content-box {
        padding: 4px 8px;
    }

    .Admission {
        left: -32px;
        top: -63px;
    }

    .content-box::after {
        top: 4px;
    }

    .Evidence {
        left: -32px;
        top: -156px;
    }

    .Identification {
        left: -32px;
        top: -298px;
    }

    .Acquisition {
        left: -32px;
        top: -396px;
    }

    

    

   
}

@media (max-width: 372px) {
    .blue-page {
        height: 912px;
    }

    .blue-page-full {
        padding: 0 !important;
    }


}

@media (max-width: 364px) {
    .blue-page {
        height: 943px;
    }
}

@media (max-width: 355px) {
    .blue-page {
        height: 917px;

    }
}













@media (min-width: 1400px) {
    .first {
        max-width: 1400px;
        margin: 0 auto;
    }

    .blue-page{
        max-width: 1400px;
        margin: 0 auto;
    }
    .last-black-section .block-color-box{
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    .last {
        max-width: 1400px;
        margin: 0 auto;
    }
}

footer .container{
    max-width:90% !important;
}
@media (min-width: 1400px) {
    footer .container{
        max-width: 1400px !important;
    }
}