@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&family=Jost:ital,wght@0,100..900;1,100..900&family=Libre+Baskerville&family=M+PLUS+1+Code:wght@100..700&family=Nanum+Gothic&family=Noto+Sans+Sinhala:wght@100..900&family=Oswald:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&family=Jost:ital,wght@0,100..900;1,100..900&family=Libre+Baskerville&family=M+PLUS+1+Code:wght@100..700&family=Nanum+Gothic&family=Noto+Sans+Sinhala:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@300&display=swap');
h1,h2,h3,h4,h5,h6,.sub,.sub2{
    font-family: "Jost", sans-serif;

}
.text16,.text14{
    font-family: "Open Sans", sans-serif;
}
h1{
    font-size: 86px;
    font-weight: 600;
    line-height: 112%;
}

h2{
    font-size: 46px;
    font-weight: 500;
    line-height: 118%;
}
h3{
    font-size: 20px;
    font-weight: 500;
    line-height: 106%;
}
h4{
    font-size: 18px;
    font-weight: 500;
    line-height: 135%;
}
.sub{
    font-size: 18px;
    font-weight: 500;
    line-height: 122%;
    text-transform: uppercase;
}
.sub2{
    font-size: 20px;
    font-weight: 400;
    line-height: 106%;
   
}
.text16{
    font-size: 16px;
    font-weight: 400;
    line-height: 156%;
   
}
.text14{
    font-size: 14px;
    font-weight: 400;
    line-height: 154%;
   
}
@media only screen and (max-width: 767px) {
    h1{
        font-size: 42px;
        font-weight: 600;
        line-height: 112%;
    }
    
    h2{
        font-size: 24px;
        font-weight: 500;
        line-height: 102%;
    }
    h3{
        font-size: 16px;
        font-weight: 500;
        line-height: 113%;
    }
    h4{
        font-size: 16px;
        font-weight: 500;
        line-height: 122%;
    }
    .sub{
        font-size: 16px;
        font-weight: 500;
        line-height: 122%;
        text-transform: uppercase;
    }
    .sub2{
        font-size: 28px;
        font-weight: 400;
        line-height: 106%;
       
    }
    .text16{
        font-size: 16px;
        font-weight: 400;
        line-height: 156%;
       
    }
    .text14{
        font-size: 14px;
        font-weight: 400;
        line-height: 164%;
       
    }
}
.primarytext{
    color: #2B76DD !important;
}
.secondarytext{
    color: #408558 !important;
}
.deepbluebg{
    background-color: #13243E !important;
}
.lightbluebg{
    background-color: #E6F2FC !important;
}
.lightbg{
    background-color: #FCFCFC !important;
}
.primarybg{
    color: #2B76DD !important;
    opacity: 0.5;
}
.secondarybg{
    color: #2B76DD !important;
    opacity: 0.5;
}
.textdark{
    color: #222529 !important;
}
.textlight{
    color: #FCFCFC !important;
}
.textwhite{
    color: #fff !important;
}
header{
    background-color: #E6F2FCDB;
}
.main-image{
    background-image: url("../images/1.jpeg");
    height:684px;
    width: 100%;
    background-size: cover;
    background-position: 0px -135px;
    position: relative;
}
.main-image h1{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}
.main-image::before{
    position: absolute;
    left: 0;
    top: 0;
    content:"";
    background: rgba(19, 36, 62, 0.4);
    width: 100%;
    height: 100%;
}
.second-section{
    margin-top: 50px;
}

.second-section h2{
    width: 950px;
}
.link{
    background-color: #408558;  
    color: #fff;
    text-decoration: none;
    padding: 7px 16px 7px 22px;
    border-radius: 25px;
         
}
.third-section{
    background-color: rgba(43, 118, 221, 0.1);
    margin: 50px 0px;
    padding: 50px 0px;
}
.filter-image img{
    height: 296px;
}
.fourth-section{
    margin: 50px 0px;
   
}
.fourth-section .left{
    background-color: rgba(34, 37, 41, 1);
    padding: 50px 0px;
    padding-left: 147px;
    
}
.fourth-section p{
    color: #fff;
}
.fourth-section .right{
    background-color: rgba(64, 133, 88, 1);
    padding: 50px 0px;
    padding-left: 147px;
    
}
.fourth-section .left .wrap{
    width: 302px;
    height: 118px;
}
.fourth-section .right .wrap{
    width: 656px;
    height: 164px;
}
.six-section{
    margin: 50px 0px;
    background: rgba(43, 118, 221, 0.1);
    padding: 50px 0px;
}
.seventh-section .wrap{
    width: 950px;
    margin: 0 auto;
}
.eight-section{
    margin: 50px 0px;
    background: rgba(43, 118, 221, 0.1);
    padding: 50px 0px;
}
.nine-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.ten-section{
    margin: 50px 0px;
    background: rgba(43, 118, 221, 0.1);
    padding: 50px 0px;
}
.eleven-section .wrap{
    width: 754px;
    margin: 0 auto;
}
footer{
    margin-top: 50px;
    background: rgba(19, 36, 62, 1);
    padding: 50px 0px;
}
.main-image2{
    background-image: url("../images/9.png");
}
.blue-second-section {
    margin: 50px 0px;
}
.blue-second-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.wight500{
    font-weight: 500;
}
.blue-third-section .img-wrap{
    background-image: url("../images/10.jpeg");
    width: 100%;
    height: 630px;  
    background-size: cover;
    background-position: 10px;
    position: relative;
    border-radius: 10px;
}
.blue-third-section .img-wrap::before{
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(19, 36, 62, 0.5);
    border-radius: 10px;

}
.blue-fourth-section{
    margin: 50px 0px;
}
.blue-fourth-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.blue-five-section{
    background-color: rgba(64, 133, 88, 1);
    margin: 50px 0px;
    padding: 50px 0px;
    margin-bottom: 0;
}
.blue-five-section p{
    color: #fff;
}
.blue-five-section h2{
    color: #fff;
    margin-bottom: 40px;
}
.blue-five-section a{
    padding: 7px 16px 7px 22px;
    background-color: rgba(252, 252, 252, 0.9);
    border-radius: 25px;
    text-align: center;
    color: rgba(64, 133, 88, 1);
    text-decoration: none;
   
}
.blue-six-section{
    margin: 50px 0px;
    padding: 50px 0px;
    margin-top: 0;
    background-color: rgba(43, 118, 221, 0.1);
}
.blue-seven-section{
    margin: 50px 0px;
}
.blue-seven-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.blue-eight-section{
    margin: 50px 0px;
    padding: 50px 0px;
    background-color: rgba(64, 133, 88, 0.1);
    margin-bottom: 0;
}
.blue-nine-section{
    padding: 50px 0px;
    background-color: rgba(19, 36, 62, 1);
   
}
.blue-nine-section h2{
    color: #fff;
}
.blue-ten-section{
    padding: 50px 0px;
    background-color: rgba(43, 118, 221, 1);
}
.blue-ten-section p{
    color: #fff;
}
.blue-ten-section h2{
    color: #fff;
}
.blue-ten-section a{
    padding: 7px 16px 7px 22px;
    background-color: rgba(252, 252, 252, 0.9);
    border-radius: 25px;
    text-align: center;
    color: rgba(19, 36, 62, 1);
    text-decoration: none;
}
.blue-eleven-section{
    margin: 50px 0px;
}
.blue-eleven-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.blue-twvel-section{
    padding: 50px 0px;
    background: linear-gradient(to bottom,rgba(43, 118, 221, 0.1), rgba(252, 252, 252, 0.1));
}
.grenn{
    color: rgba(64, 133, 88, 1);
}
.weight500{
    font-weight: 500;
}
.numberheading{
    background-color: rgba(64, 133, 88, 0.12);
    border-radius: 164px;
    padding: 12px;
}
.numberheading span{
    color: #fff;
    border-radius: 50%;
    background-color: rgba(64, 133, 88, 1);
    width: 48px;
    height: 48px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
}
.blue-twvel-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.blue-thirteen-section{
    padding: 50px 0px;
    background-color: rgba(64, 133, 88, 0.1);
}
.blue-thirteen-section a{
    color: #fff;
}
.blue-forteen-section{
    margin: 50px 0px;
}
.blue-forteen-section img{
    border-radius: 50%;
}
.blue-fifteen-section{
    padding: 50px 0px;
    background-color: rgba(19, 36, 62, 1);
}
.blue-fifteen-section p{
    color: #fff;
}
.blue-fifteen-section h2{
    color: #fff;
    margin-bottom: 30px;
}
.blue-fifteen-section a{
    background-color: rgba(230, 242, 252, 1);
    color: rgba(19, 36, 62, 1);
    
}
.blue-sixteen-section{
    background-image: url("../images/13.jpeg");
    width: 100%;
    height: 684px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.content-wrap{
    width: 558px;
    height: 232px;
    background-color: rgba(19, 36, 62, 0.64);
    text-align: center;
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}
.blue-sixteen-section p{
    color: #fff;

}
.blue-sixteen-section .wrap{
    width: 455px;
    height: 122px;
}
.blue-seventeen-section{
    margin: 50px 0px;
}
.blue-seventeen-section img{
    width: 197.24px;
    height: auto;
}
.blue-seventeen-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.blue-nineteen-section{
    padding: 50px 0px;
    background-color: rgba(43, 118, 221, 0.05);
}
.blue-nineteen-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.long-second-second{
    background: rgba(230, 242, 252, 1);
    height: 64px;
}
.long-third-second .wrap{
    width: 754px;
    margin: 0 auto;
}
.long-third-second{
    margin: 50px 0px;
}
.long-third-second a{
    color: #fff;
   
}
.long-fourth-section{
    background-color: rgba(43, 118, 221, 0.1);
    padding: 50px 0px;
}
.long-fourth-section .image-wrap{
    background-size: cover;
    height: 630px;
    width: 100%;
    margin-top: 30px;
    position: relative;
    background-image: url("../images/10.jpeg");
    background-position: 10px;
}
.long-fourth-section .image-wrap::before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(19, 36, 62, 0.5);
    z-index: 1;
}
.long-fourth-section .img{
    background-image: url("../images/15.jpeg");
    width: 100%;
    background-size: cover;
    height: 352px;
    border-radius: 12px;
}
.blue-forteen-section a{
    color: #fff;
   
}
.long-fifth-section{
    padding: 50px 0px;
    background-color: rgba(64, 133, 88, 0.1);
}
.long-seventh-section{
    margin: 50px 0px;
}
.long-seventh-section .wrap{
    width: 754px;
    margin: 0 auto;
}
.long-eight-section{
    padding: 50px 0px;
    background-color: rgba(64, 133, 88, 1);
}
.long-eight-section a{
    background-color: rgba(252, 252, 252, 0.9);
    color: rgba(64, 133, 88, 1);
    
}
.long-nineth-section{
    margin: 50px 0px;
}
.long-nineth-section .image-wrap{
    background-image: url("../images/17.jpeg");
    width: 100%;
    background-size: cover;
    height: 352px;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
}
.long-ten-section{
    background-color: rgba(43, 118, 221, 0.1);
    padding: 50px 0px;
}
.long-ten-section a{
    background-color: rgba(43, 118, 221, 1);
    color: #fff;
}
.long-eleventh-section{
    margin: 50px 0px;
}
.long-eleventh-section .wrap{
    margin-left: 100px;
}
.custom-container{
    width: 950px;
}
h2 span{
    color: rgba(43, 118, 221, 1);
}
.long-twvel-section{
    background-color: rgba(19, 36, 62, 1);
    padding: 50px 0px;
}
.long-twvel-section .box{
    width: 463px;
    height: 564px;
    margin: 0 auto;
    background-color: rgba(252, 252, 252, 1);
    border-radius: 10px;
}
.box-header{
    background-color: rgba(230, 242, 252, 1);
    height: 102px;
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.box-header div{
    color: rgba(43, 118, 221, 1);
    font-size: 32px;
    font-weight: 500;
    padding-top: 15px;
}
.box-header p{
    margin-bottom: 0;
}
.box a{
    display: inline-block;
    text-align: center;
    color: #fff;
}
.box-body h4{
    border-bottom: 1px dashed rgba(64, 133, 88, 0.5);
    padding-left: 50px;
    padding-bottom: 10px;
}
.box-body{
    padding: 0px 30px;
    padding-top: 30px;
}
.box-header{
    position: relative;
    overflow: hidden;
}
.box-header span{
    background-color: rgba(229, 238, 232, 1);
    color: rgba(64, 133, 88, 1);
    position: absolute;
    left: -22px;
    top: 15px;
    width: 100px;
    font-size: 14px;
    text-align: center;
    transform: rotate(-45deg);
}
.long-thirteen-section{
    background-color: rgba(43, 118, 221, 0.1);
    padding: 50px 0px;
}
.long-forteen-section{
    margin: 50px 0px;
}
.long-fifteen-section{
    background-image: url("../images/18.jpeg");
    width: 100%;
    background-size: cover;
   
    
    background-repeat: no-repeat;
    background-position: center;
    padding: 50px 0px;
    position: relative;
    padding-top: 100px;
}
.long-fifteen-section::before{
    background-color: rgba(19, 36, 62, 0.72);
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
}
.long-fifteen-section p{
    color: rgba(230, 242, 252, 1);
}
.long-fifteen-section::after{
    background-color: rgba(19, 36, 62, 0.5);
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    left: 0;
    top:0;
    z-index: 2;
}
.long-fifteen-section .row{
    z-index: 3;
    position: relative;
}
.long-sixteen-section{
    background-color: rgba(19, 36, 62, 1);
    padding: 50px 0px;
}
.long-sixteen-section p{
    color: rgba(230, 242, 252, 1);
}
.long-sixteen-section h2{
    color: rgba(230, 242, 252, 1);
    margin-bottom: 50px;
}
.long-sixteen-section a{
    background-color: rgba(230, 242, 252, 1);
    color: rgba(19, 36, 62, 1);
}
.long-seventeen-section{
    margin: 50px 0px;
}
.red-second-section{
    margin: 50px 0px;
}
.red-third-section{
    padding: 50px 0px;
    background-color: rgba(43, 118, 221, 0.1);
}
.red-forth-section{
    margin: 50px 0px;
}
.sub span{
    color: rgba(43, 118, 221, 1);
}
.red-fifveth-section{
    padding: 50px 0px;
    background-color: rgba(43, 118, 221, 0.1);
}
.red-sixth-section{
    margin: 50px 0px;
}
.red-eighth-section a{
    padding: 7px 16px 7px 22px;
    background-color: rgba(252, 252, 252, 0.9);
    border-radius: 25px;
    text-align: center;
    color: rgba(64, 133, 88, 1);
    text-decoration: none;
}
.red-eighth-section .wrap{
    background-color: rgba(43, 118, 221, 1);
}
.red-eighth-section .wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
.red-eighth-section .image-warap{
    background-image: url("../images/19.png");
    width: 100%;
    background-size: cover;
    height: 329px;
    background-repeat: no-repeat;
    background-position: center;
} 
.red-nineth-section .image-wrap{
    background-image: url("../images/10.jpeg");
    width: 100%;
    background-size: cover;
    height: 314px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 12px;
}
.red-nineth-section ul li{
    margin-bottom: 40px;
}
.red-tenth-section{
    background: #fff;
}
.red-eleventh-section{
    padding: 50px 0px;
    background-color: rgba(64, 133, 88, 0.1);
}
.search{
    width: 408px !important;
    height: 44px;
    border-radius: 25px;
    background-color: rgba(252, 252, 252, 1);
}
.formtop{
    position: relative;
    margin-left: 50px;
}
.formtop button{
    position: absolute;
    background-color: rgba(64, 133, 88, 1);
    border: none;
    color: #fff;
    border-radius: 50%;    
    width: 40px;
    height: 40px;
    right: 9px;
    top: 2px;
}
.nav-link{
    color: rgba(19, 36, 62, 1);
}
.navbar-light .navbar-nav .nav-link{
    color: rgba(19, 36, 62, 1);
}
footer ul{
    columns: 2;
}
footer ul li{
    margin-bottom: 15px;
}
footer ul li a{
    color: rgba(252, 252, 252, 0.5);
    font-size: 14px;
}
footer h4{
    color: rgba(252, 252, 252, 0.9);
}
footer p{
    color: rgba(252, 252, 252, 0.5);
    font-size: 14px;
    font-weight: 400;
    line-height: 16.34px;
}
.footerform{
    position: relative;
}
.footerform input{
    width: 100% !important;
    height: 44px;
    border-radius: 25px;
    border: 2px solid rgba(252, 252, 252, 0.32);
    background-color: rgba(19, 36, 62, 1);
    color: rgba(252, 252, 252, 0.5);
}
.footerform input::placeholder {
    color: rgba(252, 252, 252, 0.5);
    opacity: 1; 
}
.footerform button{
    width: 106px;
    height: 40px;
    border-radius: 25px;
    background-color: rgba(43, 118, 221, 1);
    color: rgba(252, 252, 252, 1);
    border: none;
    position: absolute;
    right: 2px;
    top: 2px;
}
.borderdiv{
    background-color: rgba(67, 101, 115, 1);
    width: 100%;
    height: 1px;
    margin-top: 40px;
    margin-bottom: 10px;
}
footer span{
    color: rgba(252, 252, 252, 0.5);
    
    font-size: 12px;
    line-height: 16.34px;
    font-weight: 400;
}
.navbar-nav h3{
    margin-bottom: 0;
}
.navbar-expand-lg .navbar-nav{
    align-items: center;
}
.navbar-expand-lg .navbar-nav .nav-link{
    font-size: 20px;
    font-weight: 500;
}
.nav-item{
    margin-left: 20px;
}
@media only screen and (max-width: 767px) {
    .formtop{
        display: none;
    }
    .navbar-light .navbar-toggler{
        background-color: rgba(43, 118, 221, 0.12);
        border: none;
        width: 44px;
        height: 44px;
        border-radius: 32px;
        padding: 0;
    }
    .navbar-toggler-icon{
        width: 1.4em;
        height: 1.4em;
        margin-left: -1px;
    
    }
    .navbar-brand img{
        width: 88px;
        height: auto;
    }
}
a{
    cursor: pointer;
}
.flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.play-b{
    width: 80px;
    cursor: pointer;
    z-index: 1;
}
.light-blue{
    background-color: #E6F2FC;
}
.accent-blue{
    background-color: #2B76DD !important;
    color: white !important;
    display: block;
}
.privacy{
    color: #4287f5;
    font-weight: 500;
    font-size: 1em;
    font-family: "Jost", sans-serif;
    text-transform: uppercase;
}
.risk-reference h2{
   font-size: 40px;
}
.prof-img{
    width: 100%;
}
.main-image h1 {
    width: 80%;
    font-size: 80px;
    text-align: center;
    top: 38%;
}
.up-icon{
    position: absolute;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 1;
}
.up-icon-home{
    bottom: -120px;
    right: 100px;
}
.up-icon img{
    width: 70px;
}
.uppercase{
    text-transform: uppercase;
}
.p-center{
    width: 80%;
    margin: 10px auto 25px;
}
.fourth-section .right .wrap,
.fourth-section .left .wrap{
    width: auto;
    height: auto;
}
.display-mobile{
    display: none;
}
.third-section{
    margin-bottom: 0;
}
.fourth-section{
    margin-top: 0;
}
.flex-start{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.item-center{
    align-items: center;
}
.item-center p{
    margin-bottom: 0 !important;
    margin-left: 10px;
    font-weight: 600;
}
.check-img{
    margin-top: 7px; 
    margin-right: 10px;
}
.long-eight-section {
    background-color: #408558;
    color: white;
}
.profession{
    margin-left: 60px;
    font-weight: 600;
}
.list-new{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: unset;
    padding-right: 60px;
}
.link-new{
    display: flex !important;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto;
}
.wrap-inner{
    padding: 20px 120px 20px 50px;
    text-align: left;
}
.relative{
    position: relative;
}
.red-a1{
    width: 180px;
    position: absolute;
    right: -20px;
    bottom: -30px;
}
.red-a2{
    width: 150px;
    position: absolute;
    left: -150px;
    bottom: 0px;
}
.red-a3{
    width: 150px;
    position: absolute;
    right: -150px;
    top: -20px;
}
.fit{
    width: fit-content;
    margin: 0 auto;
}
.img-set img{
    width: 160px;
    height: 80px;
}
@media only screen and (max-width: 1280px){
   .fourth-section .left,
   .fourth-section .right {
        padding-left: 80px;
    } 
    .fourth-section .right .wrap,
    .fourth-section .left .wrap{
        width: auto;
        height: auto;
    }
}

@media only screen and (max-width: 767px) {
    .blue-nineteen-section .wrap,
    .blue-twvel-section .wrap,
    .blue-seventeen-section .wrap,
    .blue-eleven-section .wrap,
    .blue-second-section .wrap,
    .blue-fourth-section .wrap,
    .blue-seven-section .wrap,
    .content-wrap,
    .blue-sixteen-section .wrap,
    .second-section h2,
    .seventh-section .wrap,
    .nine-section .wrap,
    .eleven-section .wrap,
    .fourth-section .right .wrap,
    .fourth-section .left .wrap,
    .long-third-second .wrap,
    .long-seventh-section .wrap,
    .custom-container,
    .long-twvel-section .box{
        width: auto;
    }
    .link {
        font-size: 12px;
        display: block;
    }
    .prof-img{
        width: 100px;
    }
    .main-image h1 {
        color: #fff;
        position: absolute;
        top: 15%;
        left: 50%;
        text-align: center;
        transform: translate(-50%);
        width: 80%;
        font-size: 42px;
    }
    .text-center-sm{
        text-align: center;
    }
    .up-icon{
        bottom: 10px;
        right: 10px;
    }
    .up-icon img{
        width: 60px;
    }
    .blue-third-section .img-wrap {
        height: 200px;
    }
    .fourth-section .left,
    .fourth-section .right {
        padding-left: unset;
        padding: 50px 25px;

    }
    .fourth-section .left .wrap,
    .fourth-section .right .wrap {
        height: auto;
    }
    .shop-now{
        padding: 10px;
        text-align: center;
        font-size: 18px;
    }
    .display-desktop{
        display: none;
    }
    .display-mobile{
        display: flex;
    }
}

 .hero-section {
    height: 342px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-bg-img {
    width: 100%;
    min-width: 1200px; /* Ensures image doesn't shrink too much */
    height: 100%;
    object-fit: cover;
    object-position: center -455px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Centers the image horizontally */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(19, 36, 62, 0.4);
    z-index: 2;
}

.hero-text {
    color: #fff;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 3;
    width: 90%; /* Ensures text container doesn't overflow on small screens */
    max-width: 600px; /* Optional: limits maximum width */
}



/* Blog Introduction Section */
.blog-second-section {
  text-align: center;
  margin-top: 50px;
}

.blog-second-section p {
  padding-left: 200px;
  padding-right: 200px;
  font-weight: 600;
}

/* Blog Filter Tools */
.blogs-section .filter-tools .categories {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding-left: 30px;
  padding-right: 30px;
  max-width: 800px;
}

.blogs-section .filter-tools .categories .category-btn {
  background-color: #e6f2fc;
  border: 2px solid #2b76dc;
  padding: 5px 10px;
  border-radius: 500px;
  margin-top: 20px;
  cursor: pointer;
  font-weight: 500;
  color: #13243e;
  transition: background-color 0.3s ease;
}

.blogs-section .filter-tools .categories .category-btn:hover {
  background-color: #2a75de;
}

/* Active Category Button Style */
.blogs-section .filter-tools .categories .category-btn.active {
  background-color: #13243d;
  color: white;
}

.sorting {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}

.sorting .language {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 20px;
  max-width: 500px;
  color: #13243e;
}
.sorting .language p {
  margin-top: auto;
  margin-bottom: auto;
  color: #13243e;
}

.sorting .language .custom-select {
  position: relative;
  width: 150px;
}

.sorting .language select {
  width: 100%;
  padding: 10px 30px 10px 10px;
  border: 2px solid #13243e;
  border-radius: 8px;
  background-color: white;
  cursor: pointer;
  color: #13243e;
}

.language-dropdown {
  position: relative;
  width: 150px;
}

.selected-option {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 2px solid #ddd;
  border-radius: 500px;
  cursor: pointer;
  background-color: transparent;
}

.selected-option img.language-flag {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.options-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  border: 2px solid #ddd;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background-color: white;
  list-style-type: none;
  padding: 0;
  margin: 0;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.language-dropdown.active .options-list {
  display: block;
}

.options-list li {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.options-list li:hover {
  background-color: #f0f0f0;
}

.options-list li img.language-flag {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.dropdown-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 25px;
  height: 25px;
}

#sortBy p {
  width: 85px;
}

#sortBy {
  width: 240px;
}

#sortBy select {
  width: 100%;
  padding: 10px 30px 10px 10px;
  border: 2px solid #ddd;
  border-radius: 500px;
  background-color: white;
  cursor: pointer;
  color: #13243e;
}

.sortBy select option:hover {
  background-color: #f0f0f0 !important;
  color: #13243e !important;
}

.blogs {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
}

/* === Blogs Grid (nur blogs_all.php) === */
.blogs-grid-page .blogs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.blogs-grid-page .other-blog{
  max-width: none;
  width: 100%;
  border-radius: 18px;           /* wie Chat-Bubble */
  overflow: hidden;              /* Bild folgt Card-Radius */
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.blogs-grid-page .otherBlogImg{
  width: 100%;
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;          /* konsistentes Card-Header-Bild */
  object-fit: cover;
  max-width: 100%;              /* überschreibt globales max-width: 362px */
  max-height: none;             /* überschreibt globales max-height */
}
.blogs-grid-page .otherBlogDescriptionCov.blogDescriptionCover{
  padding: 16px 18px;
}
.blogs-grid-page .otherBlogHead{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
/* „Bubble“ wie in chat_master.php */
.blogs-grid-page .reacts{
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
@media (max-width: 1100px){
  .blogs-grid-page .blogs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px){
  .blogs-grid-page .blogs{
    grid-template-columns: 1fr;
  }
}

.blogs .first-blog,.other-blog {
  position: relative;
  display: flex;
  background-color: #f5f5f5;
  border-radius: 8px;
}
.blogs .first-blog:hover,.other-blog:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fcfcfc;
}
.blogDescriptionCover {
  display: flex;
  flex-direction: column;
  padding: 20px 40px;
  gap: 15px;
}
.blogHead,.otherBlogHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blogHead .authorImg,.otherBlogAuthorHead .authorImg {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  object-fit: cover;
}
.author {
  display: flex;
  gap: 5px;
  align-items: center;
}
.author p,
.author h5,
.author h6,
.reacts img,
.reacts p,
.comments img,
.comments p,
.flag img,
.flag p {
  margin-top: auto;
  margin-bottom: auto;
}

.reacts {
  display: flex;
  gap: 5px;
  align-items: center;
  vertical-align: middle;
}

.heartIcon {
  width: 18px;
  height: 18px;
}
.blogFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
 .comments {
  display: flex;
  gap: 10px;
  align-items: center;
}
 .comments img {
  width: 20px;
  height: 20px;
}
.flag {
  display: flex;
  gap: 10px;
  align-items: center;
}
.flag img {
  width: 20px;
  height: 20px;
  border-radius: 100%;
}
.firstBlogImg {
  width: 500px;
  height: full;
  object-fit: cover;
  border-radius: 8px 0 0 8px;
  transition: object-fit 3s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  position: relative;
}

/* .first-blog:hover .firstBlogImg {
  object-fit: none;
} */
.blogTitle {
  font-size: 32px;
}
.other-blog-cover {
    display: flex;
    flex-direction: row;
    margin-top:50px;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  

}
.other-blog{
    display: flex;
    flex-direction: column;
    max-width: 362px;
    max-height: 716px;
    
   

}
.otherBlogImg {
    max-width: 362px ;
    max-height: 240px;
    height: full;
    object-fit: initial;
    border-radius: 8px 8px 0 0;
    transition: object-fit 3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  
  .otherBlogTitle{
    font-size: 22px;
  }
  .otherblogDescription{
    font-size: 16px;
    max-height: 165px;
    overflow: hidden;
    margin-bottom: 0px;
  }

  .otherBlogDescriptionCov{
    gap: 10px;
    padding: 15px 20px;

  }



  .otherBlogDescriptionCov .authorImg{
    width:32px ;
    height:32px ;
  }
  .otherBlogAuthorHead{
      display: flex;
      gap: 10px;
  }
  .otherBlogAuthorHead h5{
    font-size: 16px;
  }
  .otherBlogHead p,.otherBlogHead h6{
    font-size: 14px;
  }
  .otherBlogHead .heartIcon{
    width: 16px;
    height: 16px;
  }

  /* Pagination styles */
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

.pagination a{
  color: #333;
  float: left;
  padding: 6px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: none;
  border-radius: 100%;
  margin: 0 4px;
  font-weight: bold;
  font-size: 22px;
  

}

.pagination a.active {
  background-color: #13243E;
  color: white;
  border: 1px solid #13243E;
  border-radius: 100%;
}

.pagination a:hover:not(.active):not(.disabled) {
  background-color: #ddd;
}

.pagination a.disabled {
  
  cursor: not-allowed;
  
}

.pagination .ellipsis {
  background-color: transparent;
  border: none;
  cursor: default;
}

.next-page,.last-page,.first-page,.prev-page{
  background-color: #ccc;

}

.next-page{
  margin-left: 30px !important;
}

.prev-page{
  margin-right: 30px !important; 
}
  
.categoryLabel {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color:#2B76DD; 
  color: white;
  padding: 6px 18px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  z-index: 2; 

}


.categoryLabel {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.single-post-cover{
  margin-top: 20px;
}
.navigation{
  font-weight: 400;
}
.single-post-category{
 
  background-color:#E6F2FC; 
  color: #13243E;
  padding: 6px 18px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 600;
  width: fit-content;
  height: fit-content;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin-left: 100px;
}

.post-head{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 38px;
}

.post-head .post-title{
  display: flex;
  justify-content: space-between;
}
.summary{
  font-weight: 600;
  color: #13243E;
}

.single-blog-img{
  height: 628px;
  border-radius: 12px;
}

.single-blog-description-cover{
  display: flex;
  gap: 22px;
  
}
.single-blog-description{
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 852px;
  

}
.social-Media-section{
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 264px;
  height: 266px;
  position: sticky;
  top: 20px;

}
.social-Media-section .description{
  background-color: #E6F2FC;
  padding: 12px 22px;
  border-radius: 12px;
}
.social-media-icons{
  display: flex;
  justify-content: space-between;
  
}
.media-icons{
  width: 20px;
  height: 20px;
  border-radius: 100%;
}


.author-cover{
  display: flex;
  gap: 6px;
}
.reacts-cover{
  display: flex;
  gap: 25px;
}
.highlight-section {
  padding: 22px;
  background-color: #e6ede9;
  border-left: 4px solid #408558;
  border-radius: 12px;

}

.single-post-img2{
  height: 573px;
  border-radius: 12px;
}
.highlight-section2{

  background-color: #e2ebf7;
  border-color: #2B76DD;
}
.comment-section .share-section .social-icons .icons,.forward-icons{
  width: 22px;
  height: 22px;
}
.social-icons{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  
}

.share-section{
  margin-top: 7px;
}

.heart-icon{
  color: green;
  width:22px ;
  height:22px ;
  

}
.comment-section .share-section{
  display: flex;
  gap: 10px;
  float: right;
  
}

.reacts,.social-icons{
  background-color: #e5ede8;
  padding:12px 22px;
  border-radius: 32px;
  margin-top: auto;
  margin-bottom: auto;
  align-items: center;
  height:50px ;
}
.social-icons p{
 margin: 0;
}

.comment-section{
  border-top: 1px solid #b7bcc4;
  padding-top: 25px;
 
}

.comment-box textarea {
  height: 198px;
  width: 822px;
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #E4E4E4;
  resize: none; /* Prevents resizing */
  overflow-y: auto; /* Allows scrolling if content exceeds height */
}
.write-comment{
  display: flex;
  gap: 5px;
}
.write-comment svg{
   width: 20px;
   height: 20px;
   color: #13243E;
}
.write-comment h6{
  color: #13243E;
}
.post-btn{
  color: #2B76DD;
  background-color: #e2ebf7;
  padding: 8px 16px;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  line-height: 28.5px;
  float: right;
  margin-top: 10px;
}

.sample-comments-cover{
  display: flex;
  flex-direction: column;
  gap: 15px;
  
  
}

.other-comment-section{
  border-top: 1px solid #b7bcc4;
  padding-top: 25px;
  
  padding-bottom: 25px;
}

/* === Comment "Bubbles" (ähnlich chat_master.php) === */
#commentsList .other-comment-section{
  border-top: none;
  padding: 0;
  margin-top: 14px;
  margin-bottom: 0;
}
#commentsList .comment-bubble{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
#commentsList .comment-bubble-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
#commentsList .comment-bubble-head .name{
  margin: 0;
  font-weight: 700;
  font-size: 14px;
}
#commentsList .comment-content{
  margin: 0;
}
#commentsList .comment-meta-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 0 12px;
}
#commentsList .comment-meta-row .date{
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}
#commentsList .comment-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}
#commentsList .comment-action-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
}
#commentsList .comment-action-btn img{
  width: 18px;
  height: 18px;
}
#commentsList .reply-section{
  margin-top: 8px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 6px 10px;
  width: fit-content;
}

#commentsList .comment-reply-form{
  margin-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
}

/* === Lessons: gleiche Bubble-Optik wie Blog === */
.lessons-page #lessonCommentsList .other-comment-section{
  border-top: none;
  padding: 0;
  margin-top: 14px;
  margin-bottom: 0;
}
.lessons-page #lessonCommentsList .comment-bubble,
.lessons-page #lesson_meta .comment-bubble{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 12px 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.lessons-page #lessonCommentsList .comment-bubble-head,
.lessons-page #lesson_meta .comment-bubble-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.lessons-page #lessonCommentsList .comment-bubble-head .name,
.lessons-page #lesson_meta .comment-bubble-head .name{
  margin: 0;
  font-weight: 700;
  font-size: 14px;
}
.lessons-page #lessonCommentsList .comment-content{
  margin: 0;
}
.lessons-page #lessonCommentsList .comment-meta-row,
.lessons-page #lesson_meta .comment-meta-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 0 12px;
}
.lessons-page #lessonCommentsList .comment-meta-row .date,
.lessons-page #lesson_meta .comment-meta-row .date{
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}
.lessons-page #lessonCommentsList .comment-actions,
.lessons-page #lesson_meta .comment-actions{
  display: flex;
  gap: 10px;
  align-items: center;
}
.lessons-page #lessonCommentsList .comment-action-btn,
.lessons-page #lesson_meta .comment-action-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
}
.lessons-page #lessonCommentsList .comment-action-btn img{
  width: 18px;
  height: 18px;
}
.lessons-page #lessonCommentsList .comment-action-btn.is-active,
.lessons-page #lesson_meta .comment-action-btn.is-active{
  background: rgba(43,118,221,0.12);
  border-color: rgba(43,118,221,0.25);
  color: #2B76DD;
}
.lessons-page #lessonCommentsList .reply-section{
  margin-top: 8px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 6px 10px;
  width: fit-content;
}
.lessons-page #lessonCommentsList .comment-reply-form{
  margin-top: 10px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Lessons: linke Liste wie "Chat-Liste" */
.lessons-page #all_lessons_list .lesson-item{
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 12px 12px;
  background: #fff;
}
.lessons-page #all_lessons_list .lesson-item:hover{
  background: rgba(0,0,0,0.03);
}
.lessons-page #all_lessons_list .lesson-item.active{
  background: rgba(43,118,221,0.10);
  border-left: 4px solid rgba(43,118,221,0.60);
  color: #111 !important; /* aktive Lektion: Text dunkel */
}
.lessons-page #all_lessons_list .lesson-item.active .lesson-item-title{
  color: #111 !important;
}
.lessons-page #all_lessons_list .lesson-item.active .lesson-item-sub{
  color: rgba(0,0,0,0.70) !important;
  opacity: 1 !important;
}
.lessons-page #all_lessons_list .lesson-item .lesson-item-main{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.lessons-page #all_lessons_list .lesson-item .lesson-item-title{
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lessons-page #all_lessons_list .lesson-item .lesson-item-sub{
  font-size: 12px;
  opacity: 0.7;
}
.lessons-page #all_lessons_list .lesson-item .lesson-item-right{
  margin-left: 10px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lessons-page #all_lessons_list .lesson-progress-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.lessons-page #all_lessons_list .lesson-progress-pill.done{
  background: rgba(25,135,84,0.12);
  border-color: rgba(25,135,84,0.22);
  color: #198754;
}

/* Lessons: Quiz/Fragen */
.lessons-page .lesson-quiz-item{
  padding: 14px 14px;
}
.lessons-page .lesson-quiz-q{
  margin-bottom: 10px;
}
.lessons-page .lesson-quiz-answers{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 767px){
  .lessons-page .lesson-quiz-answers{ grid-template-columns: 1fr; }
}
.lessons-page .lesson-quiz-answer{
  /* wie chat_master: weiche Pills statt harte Buttons */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-weight: 800;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  transition: transform .06s ease, background .12s ease, border-color .12s ease;
  text-align: center;
  line-height: 1.25;
}
.lessons-page .lesson-quiz-answer:hover{
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
}
.lessons-page .lesson-quiz-answer:active{
  transform: translateY(1px);
}
.lessons-page .lesson-quiz-answer.is-correct{
  background: rgba(25,135,84,0.12);
  border-color: rgba(25,135,84,0.25);
  color: #198754;
}
.lessons-page .lesson-quiz-answer.is-wrong{
  background: rgba(220,53,69,0.10);
  border-color: rgba(220,53,69,0.25);
  color: #dc3545;
}
.lessons-page .lesson-quiz-feedback{
  margin-top: 10px;
}

/* Quiz: gleiche Bubble-Card Optik wie Comments (scoped) */
.lessons-page #lessonQuizList .comment-bubble{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.lessons-page #lessonQuizList .lesson-quiz-q{
  font-size: 15px;
  font-weight: 900;
}
.lessons-page #lessonQuizList .lesson-quiz-feedback{
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 6px 10px;
  width: fit-content;
}

/* Academy Breadcrumb + Subnav (Lessons) */
.academy-breadcrumb{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 10px;
}
.academy-breadcrumb a{
  text-decoration: none;
}
.academy-breadcrumb .sep{
  opacity: 0.6;
}

.academy-grid-page .academy-lang-select{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.academy-grid-page .academy-lang-label{
  font-size: 13px;
  opacity: 0.85;
  font-weight: 800;
  margin: 0;
}

.lessons-page .academy-subnav{
  position: sticky;
  top: 10px;
  z-index: 2;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0 12px 0;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}
.lessons-page .academy-subnav-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
}
.lessons-page .academy-subnav-btn.active{
  background: rgba(43,118,221,0.12);
  border-color: rgba(43,118,221,0.25);
  color: #2B76DD;
}

/* === Academy overview tiles (ähnlich blogs_all cards) === */
.academy-grid-page .academy-card-shell{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.academy-grid-page .academy-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.academy-grid-page .academy-tile{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.academy-grid-page .academy-tile-imgwrap{
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f5f5f5;
}
.academy-grid-page .academy-tile-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.academy-grid-page .academy-tile-body{
  padding: 14px 16px 16px 16px;
}
.academy-grid-page .academy-tile-pill{
  width: fit-content;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 10px;
}
.academy-grid-page .academy-tile-title{
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.academy-grid-page .academy-tile-meta{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.academy-grid-page .academy-meta-pill{
  width: fit-content;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
  opacity: 0.9;
}
.academy-grid-page .academy-meta-pill--reading{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.academy-grid-page .academy-flags{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 2px;
}
.academy-grid-page .academy-flags-more{
  font-weight: 900;
  font-size: 11px;
  opacity: 0.8;
  margin-left: 2px;
}
.academy-grid-page .academy-langcodes{
  font-weight: 900;
  font-size: 11px;
  opacity: 0.75;
  margin-right: 2px;
}
.academy-grid-page .academy-flag-img{
  width: 18px !important;
  height: 18px !important;
  max-width: none !important;
  max-height: none !important;
  flex: 0 0 18px;
  display: inline-block;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
}
@media (max-width: 1100px){
  .academy-grid-page .academy-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .academy-grid-page .academy-grid{ grid-template-columns: 1fr; }
}

.comment-head{
  display: flex;
  justify-content: start;
  gap: 10px;
  align-items: center;

}
.profile-pic{
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background-size: contain;
  
}

.comment-head h6{
  font-weight: 600;
  font-size: 14px;
}
.comment-content{
  font-weight: 400;
  font-size: 14px;
  margin: 0px;
  line-height: 164%;
  

}


.expand{
  width: 20px;
  height: 20px;

}
.reply-section{
  display: flex;
  gap: 5px;
  align-items: center;
}
.reply-section p{
  margin: 0px;
}
.like-icon,.dislike-icon{
 width: 20px;
 height: 20px;
}
.like-section{
  display: flex;
  gap: 10px;
  align-items: center;
}
.like, .dislike{
  display: flex;
  gap: 5px;
}
.comment-reply-btn{
  background-color: transparent;
  border: none;

}
.like p, .dislike p{
  margin: 0px;
}
h6.name,p.date{
  margin: 0px;
}

.inner-content{

  padding-left: 42px;
  padding-right: 42px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}


.related-products-section{
  display: flex;
  flex-direction: column; 
  position: relative; 
  
}
.related-products-cover{
  display: flex;
  width: 822px !important;
  justify-content: center;
  gap: 15px;
  position: relative;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 15px;
  padding-top: 15px;
  

  
}

.related-products-cover::-webkit-scrollbar {
  height: 4px;
}

.related-products-cover::-webkit-scrollbar-track {
  background: #e2ebf7;
  border-radius: 4px;
}

.related-products-cover::-webkit-scrollbar-thumb {
  background: #1c69d5;
  border-radius: 4px;
  
}

.related-products-cover::-webkit-scrollbar-thumb:hover {
  background: #006aff;
}
.product-card{
  display: flex;
  flex-direction: column;
  border-radius: 12px ;
  width: 264px;
  height: 376px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
}
.card-img{
  width: 264px;
  height: 180px;
  border-radius: 12px   12px 0px 0px;
}
.read-more-next{
  width: 18px;
  height: 18px;
}
.read-more{
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 20px;
  left: 10px;
}
.read-more p{
 margin: 0px;
 color: #2B76DD;
 font-size: 14px;
 font-weight: 600;
 line-height: 28px;

}
.crd-description{
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.crd-description h6{
  font-size: 18px;
  font-weight: 500;
  line-height: 135%;

}
.crd-description h5{
  font-size: 22px;
  font-weight: 600;
  line-height: 100%;
  color: #408558;
}
.product-details{
  font-size: 12px;
  font-weight: 400;
  line-height: 100%;
  color:#222529 ;
}

.left-arrow, .right-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #CDDEF4;
  border-radius: 100px;;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.left-arrow {
  left: -15px;

}

.right-arrow {
  right: -15px;
}

.left-arrow svg, .right-arrow svg {
  width: 24px;
  height: 24px;
  color: #13243E;
}
.related-products-title{
  font-size: 46px;
  font-weight: 500;
  color: #222529;
  width: fit-content;
}
.view-all-products{
 width: 170px;
 height: 48px;
  border-radius: 25px;
  text-decoration: none;
  border: none;
  background-color: #e2ebf7;
  padding: 8px 16px;
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 28.5px;
  color: #2B76DD !important;
  margin-top: auto;
  margin-bottom: auto;

}

.all-products-btn svg{
  width:18px;
  height:18px;
  stroke:#2B76DD ;
}

.all-products-btn{
  display: flex;
  gap: 5px;
}

.title-section{
  display: flex;
  justify-content: space-between;
}
#flag-mobile{
  display: none;
}

#view-all-mobile-btn{
  display: none; 
}

#first-blog-header-mobile{
  display: none;
}
#otherBlogAuthorHead-mobile{
  display: none;
}

#view-more-mobile-btn{
  display: none;
}

@media only screen and (max-width:767px){
  .navigation {
    font-size: 14px;
   
    
}
.navigation strong{
  font-weight: 600;
}
.post-head .post-title{
 flex-direction: column;
 align-items: center;
  justify-content: center;
  margin-top: -20px;
  
  gap: 20px;
}
.single-post-category{
  order: 1;
  margin: 0px;
  
}
.post-head .post-title h2{
  order: 2;
  
}
.single-blog-description-cover{
 flex-direction: column;

}
.social-Media-section{
   position: initial;
   margin-left: auto;
   margin-right: auto;
   order: 1;
   width: 100%;
   margin-top: 15px;
   margin-bottom: 30px;

   
}
.single-blog-description{
  order: 2;
}
.blogHead{
  flex-direction: column;
  gap: 15px;
}
.single-blog-description{
 width: 100%;
}
.comment-box textarea{
  width: 100%;
}
.related-products-section{
  width: 100%;
}
.related-products-cover{
  width: 100% !important;
}
.blogHead,.otherBlogHead{
  align-items: normal;
  
}
.social-Media-section .share-section .social-media-icons{
  justify-content: space-evenly;
  margin-top: 15px;
  
}
.blogHead .author-cover .author {
  flex-direction: column;
} 
.blogHead .author-cover .author p{
width: 100%;
text-align: left;
font-size: 12px;
}
.blogHead .authorImg, .otherBlogAuthorHead .authorImg {
  width: 42px;
  height: 42px;
}
.blogHead .author-cover .author h5{
  font-size: 14px;
}
#flag-mobile{
  display: flex;

}
#react-mobile{
  display: none;
}
.reacts-cover{
  justify-content: space-between;
}
.description-title{
  font-size: 22px;
  font-weight: 500;
}
.single-blog-description p{
  font-size: 16px;
  font-weight: 400;
}
.highlight-section{
  font-size: 20px;
  font-weight: 500;
}
.single-blog-description .sub-title{
  font-size: 20px;
  font-weight: 500;
}

.comment-section{
  display: flex;
  justify-content: center;
}
.share-section{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
 
}
.share-section .reacts{
  width: fit-content;
  align-items: center;
}

.share-section .social-icons{
  background-color: transparent;
  display: flex;
  justify-content: space-around;
  width: fit-content;
  
}
#view-all{
  display: none;
}
.inner-content .comment-content{
  font-size: 14px;
  font-weight: 400;
}
.sample-comments-cover .comment-head .profile-pic{
  width: 32px;
  height: 32px;
}
.sample-comments-cover .comment-head .name{
  font-size: 14px;
  font-weight: 600;
}
.sample-comments-cover .comment-head .date{
  font-size: 14px;
  font-weight: 400;
}
#view-all-mobile-btn{
  display: flex; 
  background-color: #2B76DD;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;

}
#view-all-mobile-btn svg,#view-all-mobile-btn a{
  margin-top: auto;
  margin-bottom: auto;
  color: #fcfcfc;
  

}
#view-all-mobile-btn svg{
  stroke: #fcfcfc;
}








.hero-text h1{ 
  font-size: 42px;
  font-weight: 600;

}
.hero-text{
  top: 35%;
}
.blog-second-section{
  width: 100%;
}
.blog-second-section p{
  padding: 0px 32px;
}
.blogs-section{
  width: 100%;
}
#categories{
  display: flex;
  width: 100%;
  height: auto !important;
  flex-wrap: wrap;

}
.sorting{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
#sortBy{
  margin-left: auto;
  margin-right: auto;
 
}
.sorting .custom-select{
  display: flex;
  flex-direction: column;
}
.first-blog{
  display: flex;
  flex-direction: column;
  max-width: 362px;
}
.first-blog .firstBlogImg{
  max-width: 362px;
  border-radius:8px 8px 0 0 ;

}
#first-blog-header-mobile{
  display: flex;
  justify-content: space-between;
}
#first-blog-header{
  display: none;
}
.blogDescription{
  font-size: 16px;
  max-height: 165px;
  overflow: hidden;
  margin-bottom: 0px;
}
.blogTitle {
  font-size: 22px;
}
.blogDescriptionCover{
  gap: 10px ;
  padding: 15px 20px ;
}
.other-blog-cover{
  margin-top: 7px;
  align-items: center;
  justify-content: center;
}
.blogs{
  align-items: center;
  justify-content: center;
}
.other-blog{
  max-height: 746px;
}
.pagination{
  display: none;
}

#view-more-mobile-btn {
  display: flex; 
  background-color: #2B76DD;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  margin-top: 20px;
}
#view-more-mobile-btn  svg,#view-more-mobile-btn  a{
  margin-top: auto;
  margin-bottom: auto;
  color: #fcfcfc;
  

}
#view-more-mobile-btn  svg{
  stroke: #fcfcfc;
}


}