@font-face {
  font-family: 'poppins';
  src: url('/assets/theme/images/officershub/poppins_semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
}

.lan-drop-down{
    pointer-events: none;
}
body{
    background-color: white !important;
}
header{
    background-color: white !important;
}
p{
    color: black;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}
h2{
    font-family: "poppins", sans-serif;  
}
.of-bnr-section{
    margin: 14rem 0 5rem;
}
.banner-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.banner-logo img{
    width: 29rem;
}
.banner-logo-in-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.banner-logo-in-div h2{
    font-size: 91px;
    margin-top: 1rem;
    color: #1c75bc;
}
.bnr-cnt-section{
    margin: 7rem 0 2rem;
}
.bnr-cnt-section p{
    font-size: 18px !important;
    line-height: 28px;
    margin-bottom: 1rem;
    text-align: center;
}
.tool-kit-div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 3rem;
    cursor: pointer;
}
.tool-kit-div img{
    max-width: 10rem;
}
.tool-kit-div p{
    font-size: 42px !important;
    color: #287cbf;
    line-height: normal;
    font-weight: 600;
}
.video-div iframe{
    width: 100%;
    height: 500px;
    border: 5px solid #4dabe9;
}
.video-des{
    font-size: 18px !important;
    line-height: 30px;
    margin: 1rem 0 1rem;
    text-align: center;
}
.understanding-section .banner-logo img{
    width: 14rem;
}
.understanding-section .banner-logo-in-div{
    flex-direction: column-reverse;
    margin: 4rem 0 4rem;
}
.understanding-section .banner-logo-in-div h2{
    font-size: 59px;
}
.of-accordion-section{
    margin: 5rem 0 2rem;
}
/* .slider-main-div{
    align-items: center;
    background-image: linear-gradient(to left, #51ade9 -1%, #eff2f2 85%);
    padding: 5rem;
    border-radius: 5rem;
    justify-content: space-between; 
    position: relative;
} */
.slider-banner-div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
}
.slider-banner-div img{
    max-width: 21rem;
}
.usecase-slide img{
    width: 100%;
}
.usecase-slide p{
    max-width: 30rem;
}
.slider-bnr-title{
    font-size: 3.5rem !important;
    max-width: 19rem;
    line-height: 64px;
    color: #1c75bc;
    margin-top: 1rem;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}
.slider-bnr-cnt{
    font-size: 1.4rem !important;
    text-align: center;
    max-width: 18rem;
    font-style: italic;
    color: #2479bd;
    line-height: normal;
    margin-top: 1rem;
}
.usecase-slide p{
    font-size: 1.4rem !important;
    text-align: left;
    max-width: 32rem;
    color: #2479bd;
    line-height: 28px;
    margin-top: 1rem; 
}
.usecase-slide p b{
    font-style: italic;
}
.of-slider-section .slick-prev{
    display: none !important;
}
.of-slider-section .slick-next{
    position: absolute;
    background: url(/assets/theme/images/officershub/slider_right_arrow.png) no-repeat;
    background-color: #7cc0ec;
    width: 75px;
    height: 75px;
    background-position: center;
    background-size: 68%;
    right: 4%;
    bottom: 4%;
    border: 5px solid black;
    border-radius: 50%;
}
#of-accordion .accordion-item{
    background: transparent;
    border: none;
    margin-bottom: 1rem;
}   
.accordion-body{    
    padding: 0;
    padding-top: 1rem;
}
.accordion-body-in-div{
    border: 3px solid #dbeefb;
    padding: 16px 20px;
    border-radius: 26px;
}
.accordion-button{
    font-size: 20px;
}
.accordion-button, .accordion-button:not(.collapsed){
    background: transparent !important;
}
.accordion-button:focus{
    border: none;
    box-shadow: none;
}
.accordion-header{
    background: linear-gradient(to right, #f0f2f3, #b4dcf5);
    border-radius: 26px
}
.accordion-header button{
    font-weight: 600;
    color: black !important;
}
.accordion-button:not(.collapsed)::after{
    border: 2px solid #f1f3f3;
    background-image: url(/assets/theme/images/officershub/accordion_minus.png);
}
.accordion-button::after{
    border: 2px solid #f1f3f3;
    background-image: url(/assets/theme/images/officershub/accordion_plus.png);
}
.acc-body-inner-cnt-div{
    margin-bottom: 1rem;
}
.acc-body-title{
    font-weight: 600;
    font-style: italic;
}
.accordion-body-grid-div{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto auto auto; 
    grid-template-areas: 
        "a b" 
        "c d" 
        "e e"  
        "f f"; 
    gap: 10px;
}
.acc-body-grid-in-div:nth-child(1){
    grid-area: a;
}
.acc-body-grid-in-div:nth-child(2){
    grid-area: b;
}
.acc-body-grid-in-div:nth-child(3){
    grid-area: c;
}
.acc-body-grid-in-div:nth-child(4){
    grid-area: d;
}
.acc-body-grid-in-div:nth-child(5){
    grid-area: e;
}
.acc-body-grid-in-div:nth-child(6){
    grid-area: f;
}
.acc-body-grid-in-div{
    border: 3px solid #dbeefb;
    padding: 16px 20px;
    border-radius: 26px;
}
.acc-body-grid-in-div .acc-body-title{
    margin-bottom: 10px;
}
.benifit-txt{
    margin-top: 2rem;
}
.acc-body-benifit-div img{
    width: 100%;
    max-width: 47rem;
}
.benifit-img-div{
    width: fit-content;
    margin: 0 auto;
}
#of-accordion p{
    font-size: 16px !important;
    line-height: 24px;
}






@media screen and (max-width:1400px) {
    .slider-banner-div img {
        max-width: 19rem;
    }
    .slider-bnr-title {
        font-size: 3.2rem !important;
        text-align: center;
    }
    .usecase-slide p {
        font-size: 1.2rem !important;
    }
    .of-slider-section .slick-next{
        width: 70px;
        height: 70px;
        background-size: 68%;
    }
    .of-bnr-section{
        margin: 10rem 0 5rem;
    }
    .banner-logo img {
        width: 23rem;
    }
    .banner-logo-in-div h2 {
        font-size: 81px;
    }
    .bnr-cnt-section {
        margin: 5rem 0 2rem;
    }
}

@media screen and (max-width:1199px) {
    .banner-logo img {
        width: 27rem;
    }
    .banner-logo-in-div h2 {
        font-size: 83px;
    }
    .bnr-cnt-section {
        margin: 4rem 0 2rem;
    }
    .tool-kit-div p {
        font-size: 34px !important;
        color: #287cbf;
    }
    .slider-banner-div img {
        max-width: 16rem;
    }
    .slider-bnr-title {
        font-size: 3rem !important;
    }
    .usecase-slide p {
        font-size: 1rem !important;
        line-height: 22px;
    }
    .of-slider-section .slick-next {
        width: 60px;
        height: 60px;
        right: 3%;
        bottom: 5%;
    }
    .slider-bnr-cnt{
        margin-top: 0.2rem;
        max-width: 16rem;
        font-size: 1rem !important;
    }
}

@media screen and (max-width:991px) {
    .banner-logo img {
        width: 22rem;
    }
    .banner-logo-in-div h2 {
        font-size: 71px;
    }
    .bnr-cnt-section {
        margin: 2rem 0 2rem;
    }
    .tool-kit-div p {
        font-size: 26px !important;
    }
    .tool-kit-div img{
        max-width: 7rem;
    }
    .understanding-section .banner-logo-in-div h2 {
        font-size: 50px;
    }
    .slider-banner-div{
        width: 100%;
    }
    .slider-bnr-title, .slider-bnr-cnt{
        max-width: 100%;
    }
    .of-bnr-section {
        margin: 8rem 0 3rem;
    }
}


@media (max-width: 768px) {
    .banner-logo img {
        width: 17rem;
    }
    .banner-logo-in-div h2 {
        font-size: 57px;
    }
    .tool-kit-div p {
        font-size: 18px !important;
    }
    .tool-kit-div img {
        max-width: 5rem;
    }
    .understanding-section .banner-logo-in-div h2 {
        font-size: 41px;
    }
    .understanding-section .banner-logo img {
        width: 13rem;
    }
    .understanding-section .banner-logo-in-div {
        flex-direction: column-reverse;
        margin: 3rem 0 3rem;
    }
    .of-accordion-section {
        margin: 3rem 0 2rem;
    }
    .benifit-img-div{
        margin-top: 1rem;
    }
    .accordion-body-grid-div {
        grid-template-columns: 1fr; 
        grid-template-areas:
        "a"
        "b"
        "c"
        "d"
        "e"
        "f";
    }
    .slider-banner-div img {
        max-width: 13rem;
    }
    .slider-bnr-title {
        font-size: 2rem !important;
        margin-top: 0;
    }
    .of-slider-section .slick-next {
        width: 35px;
        height: 35px;
        right: 2%;
        bottom: 5%;
        background-size: 58%;
        border: 3px solid black;
    }
}

@media screen and (max-width:575px) {
    .slider-main-div{
        margin: 0 1px;
    }
    .understanding-section .banner-logo-in-div h2 {
        font-size: 35px;
    }
    .understanding-section .banner-logo img {
        width: 11rem;
    }
    .understanding-section .banner-logo-in-div{
        margin: 2rem 0 2rem;
    }
    .video-des {
        font-size: 14px !important;
        line-height: 23px;
    }
    .tool-kit-div{
        margin: 1rem 0 2rem;
    }
    .bnr-cnt-section p {
        font-size: 16px !important;
        line-height: 25px;
    }
    .banner-logo img {
        width: 12rem;
    }
    .banner-logo-in-div h2{
        font-size: 47px;
        margin-top: 0.5rem;
    }
    .bnr-cnt-section {
        margin: 2rem 0 1rem;
    }
    .of-bnr-section {
        margin: 8rem 0 1rem;
    }
    .of-slider-section .slick-next{
        border: 2px solid black;
    }
}

@media screen and (max-width:425px) {
    .banner-logo-in-div h2 {
        font-size: 43px;
    }
    .bnr-cnt-section p {
        font-size: 14px !important;
        line-height: 22px;
    }
    
    .tool-kit-div p {
        font-size: 16px !important;
    }
    .tool-kit-div img {
        max-width: 3rem;
    }
    .banner-logo-in-div h2{
        font-size: 34px;
    }
    .understanding-section .banner-logo img {
        width: 10rem;
    }
    .accordion-button {
        font-size: 16px;
    }
    #of-accordion p {
        font-size: 14px !important;
        line-height: 21px;
    }
    .benifit-txt {
        margin-top: 1rem;
    }
    .slider-banner-div img {
        max-width: 9rem;
    }
    .slider-bnr-title {
        font-size: 1.5rem !important;
        line-height: 42px;
    }
    .slider-bnr-cnt {
        margin-top: 0;
        font-size: 0.8rem !important;
    }
    .usecase-slide p {
        font-size: 0.8rem !important;
        line-height: 19px;
        max-width: 100%;
    }
    .of-slider-section .slick-next{
        width: 36px;
        height: 36px;
        background-size: 52%;
    }
}

@media screen and (max-width:375px) {
    .of-slider-section .slick-next {
        width: 28px;
        height: 28px;
    }
}
@media screen and (max-width:320px) {
    .slider-bnr-title{
        line-height: 31px;
        margin-top: 10px;
    }
}