/* ======== start Principal and Chairman Page ========= */

.p_banner_wrap .title_90 {
    position: relative;
    color: #fff;
    line-height: 1.5555555556;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    font-weight: 600;
}

.hov_el a{
    font-family: 'Poppins', sans-serif !important;
    transition: all 0.5s ease;
}
.hov_el .active-bt{
    background: #c98815;
    padding: 5px 10px;
    border-radius: 10px 0;
}

.element_anim_1 .start_anim {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.element_anim_1.start_anim {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.scrollTo_banner {
    position: relative;
    /* background-color: rgba(237, 239, 244, .1); */
    width: 100%;
    color: #fff;
    height: 100%;
    letter-spacing: .05em;
    background-color: rgba(39, 54, 86, .55) !important;
}
.element_anim_1 {
    transform: translateY(10px);
    -webkit-transition: .5s ease-in-out .1s;
    -moz-transition: .5s ease-in-out .1s;
    transition: .5s ease-in-out .1s;
}
.element_anim_1 {
    opacity: 0;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: all .5s ease-in-out .1s;
    transition: all .5s ease-in-out .1s;
}
.scrollTo_banner .scrollTo_elements {
    color: #edeff4;
    font-size: 14px;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center !important;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.scrollTo_wrap{
    display: flex;
    justify-content: center !important;
}
.scrollTo_elements{
    text-align: center !important;
}
.scrollTo_banner .scrollTo_elements .element:hover {
    color:   #fff7ea !important;
    text-decoration: none !important;
    outline: none;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}
.element a:hover{
    color:  #f1f1f1;
    background: #c98815;
    padding: 5px 10px;
}

.introducy_paragraph{
    margin: 50px 0;
}

.less-margin{
    padding: 20px 15px;
}
.art-right-second img{
    width: 100%;
    height: 500px;
}
.art-right-second .border-one {
    position: absolute;
    left: 22px;
    top: 15px;
    width: 90%;
    height: 94%;
    border-right: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    z-index: 1;
}
.art-right-second .border-one::before {
    position: absolute;
    content: '';
    right: -28px;
    bottom: 0px;
    width: 35px;
    height: 130px;
    background-color: #ffc258;
}
.art-right-second .border-one::after {
    position: absolute;
    content: '';
    left: -25px;
    /* bottom: 0px; */
    width: 35px;
    height: 130px;
    background-color: #ffc258;
    /* background-color: #38519d; */
    /* background-color: #0d3b66; */
}
.principl-title{
    background: #38519d;
    text-align: center;
    width: 90%;
    clip-path: polygon(0 0, 96% 0, 75% 100%, 0 calc(100% - 0px));
    height: 60px;
    padding: 10px;
}
.principl-title h3{
    font-size: 20px;
    color: #fff;
    margin: 0;
    line-height: 12px;
}
.principl-title span{
    font-size: 20px;
    color: #fff;
    margin: 0;
}

.mess-title{
    background: #38519d;
    padding: 5px 10px;
    /* margin-top: 50px; */
    /* margin-bottom: 35px; */
    position: relative;
    width: 68%;
    left: 430px;
    top: 70px;
    z-index: 1;
}
.mess-title h5{
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    margin: 0px;
    font-family: 'Poppins', sans-serif;
    line-height: 32px;
    padding-left: 90px;
}
.contentparagraph{
    margin-top: 90px;
}
.contentparagraph span{
    font-family: 'Poppins', sans-serif !important;
}
.fac-btm h2{
    font-size: 20px;
    color: #4f4f4f;
}
.fac-btm p{
    font-size: 15px;
    color: #777777;
    text-align: justify;
    margin-bottom: 5px;
    font-family: 'Poppins', sans-serif;
}

@media screen and (max-width: 375px) {
    .art-right-second .border-one {
        position: absolute;
        left: 20px;
        top: -75px;
        width: 86%;
        height: 123%;
        border-right: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
        z-index: 1;
    }
}


@media screen and (max-width: 767px) {
    .scrollTo_banner {
        display: none;
    }
    .p_banner_wrap {
        height: 300px !important;
    }
    .introducy_paragraph {
        margin-top: 20px;
    }
    .p_banner_wrap .title_90 {
        font-size: 30px !important;
        line-height: 1.1666666667;
        padding-bottom: 24px;
    }
    .t2{
        font-size: 14px !important;
    }
    .hem_left ul li .main_points_anim span {
        padding-right: 30px !important;
        position: relative;
        z-index: 5;
        -webkit-transition: all .3s ease-in-out 0s;
        transition: all .3s ease-in-out 0s;
        background: #273656;
        display: inline-block;
    }
    .hem_left ul {
        font-size: 15px !important;
    }
    .hem_left_sub {
        background-color:  #ffc258;
    }
    .art-right-second img {
        width: 100%;
        height: 325px;
        margin-top: -90px;
    }
    .art-right-second .border-one {
        position: absolute;
        left: 22px;
        top: -75px;
        width: 87%;
        height: 123%;
        border-right: 1px solid #ffffff;
        border-left: 1px solid #ffffff;
        z-index: 1;
    }
    .art-right-second .border-one::before {
        position: absolute;
        content: '';
        right: -22px;
        bottom: 0px;
        width: 35px;
        height: 130px;
        background-color: #ffc258;
    }
    .principl-title {
        background: #38519d;
        text-align: center;
        width: 98%;
        clip-path: polygon(0 0, 96% 0, 75% 100%, 0 calc(100% - 0px));
        height: 60px;
        padding: 10px;
    }
    .principl-title h3 {
        font-size: 16px;
        color: #fff;
        margin: 0;
        line-height: 12px;
    }
    .principl-title span {
        font-size: 16px;
        color: #fff;
        margin: 0;
    }
    .contentparagraph {
        margin-top: 30px;
    }
    .contentparagraph span {
        font-size: 14px;
    }
}


/* ======== start Vision and Mission and our management Page ========= */
.vision_paragraph{
    margin: 20px 0 40px 0;
}
.vision-cont-inner{
    margin-top: 40px;
}
.vision-cont-inner p{
    font-size: 15px;
    color: #777777;
    text-align: justify;
    font-family: 'Poppins', sans-serif;
}

/* ======== start cbse results Page ========= */

.result_paragraph{
    margin: 20px 0 40px 0;
}

.topper-area{
    margin: 30px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}
.tpr-inner{
    width: 260px;
    height: 230px;
    padding: 10px;
    background: #fff7ea;
    border-radius: 10px 0;
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
    border: 1px dashed #38519d;
    margin: 0 auto;
    
}
.tpr-inner img{
    width: 170px; 
    height: 178px;
}
.tpr-name{
    margin-top: 10px;
    background: #38519d;
    padding: 5px;
    text-align: center;
    border-radius: 30px 0px 0px 30px;
    border-right: 5px solid #ffc258;
}
.tpr-name h4{
    font-size: 16px;
    color: #ffca6d;
    margin: 0;
    padding-top: 4px;
}
.tpr-name p{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 22px;
}


/* .text-style {
    font-size: 30px;
    font-weight: 700;
    text-align: left;
    line-height: 1;
    background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(255, 255, 255, 0.3281687675) 0%, rgba(0, 0, 0, 0.2077205882) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
    text-align: center;
} */

.topper-sec{
    margin-top: 40px;
    margin-bottom: 40px;
    text-align: center;
}

.topper-sec-img img{
    width: 170px; 
    height: 178px;  
}

.topper-sec-area{
    width: 260px;
    height: 230px;
    padding: 10px;
    background: #fff7ea;
    border-radius: 10px 0;
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
    border: 1px dashed #38519d;
    margin: 0 auto;
    
}

.tpr-name-area{
    margin-top: 10px;
    background: #38519d;
    padding: 5px;
    text-align: center;
    border-radius: 30px;
    /* border-right: 5px solid #ffc258; */
}
.topper-sec-img img{
    width: 170px; 
    height: 178px;  
}
.tpr-name-area h4{
    font-size: 16px;
    color: #ffca6d;
    margin: 0;
    padding-top: 4px;
}
.tpr-name-area p{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 22px;
}


/* ======== start house and clubs Page ========= */

.house-crd{
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

.h-satluj{
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 1s forwards;
    border: 1px dashed #C70039;
    background: #fff2f5; 
}
/* .h-satluj:hover{
    transform: scale(1.04);
    border-bottom: 5px solid #C70039;
    transition: all 0.4s;
} */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.icon-area{
   display: flex;
   gap: 20px; 
}

.satjul-icon{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #C70039;
    position: relative;
    top: -50px;
    color: #fff;
    text-align: center;
}
.satjul-icon i{
    font-size: 35px;
    color: #fff;
    position: relative;
    z-index: 1;
    margin-top: 30px;
    margin-left: -22px;
}

.satjul-icon:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #C70039;
  }

.satjul-head {
    width: 100%;
    padding-top: 30px;
}
.satjul-head h2{
    background: #C70039;
    color: #fff;
    padding: 5px 15px;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}
.satjul-title p{
    font-size: 15px;
    color: #777;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
    margin-top: 15px;
}


/* start ravi house */

.h-ravi{
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 1s forwards;
    border: 1px dashed #ffc258;
    background: #fff6e7;
}
/* .h-ravi:hover {
    transform: scale(1.04);
    border-bottom: 5px solid #ffc258;
    transition: all 0.4s;
} */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.icon-area{
   display: flex;
   gap: 20px; 
}

.ravi-icon{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #ffc258;
    position: relative;
    top: -50px;
    color: #fff;
    text-align: center;
}
.ravi-icon i{
    font-size: 35px;
    color: #fff;
    position: relative;
    z-index: 1;
    margin-top: 30px;
    margin-left: -22px;
}

.ravi-icon:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #ffc258;
  }

.ravi-head {
    width: 100%;
    padding-top: 30px;
}
.ravi-head h2{
    background: #ffc258;
    color: #fff;
    padding: 5px 15px;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}
.ravi-title p{
    font-size: 15px;
    color: #777;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
    margin-top: 15px;
}



/* start ganges house */

.h-ganges{
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 1s forwards;
    border: 1px dashed #3498db;
    background: #e3f4ff;
}
/* .h-ganges:hover {
    transform: scale(1.04);
    border-bottom: 5px solid #3498db;
    transition: all 0.4s;
} */



@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.icon-area{
   display: flex;
   gap: 20px; 
}

.ganges-icon{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #3498db;
    position: relative;
    top: -50px;
    color: #fff;
    text-align: center;
}
.ganges-icon i{
    font-size: 35px;
    color: #fff;
    position: relative;
    z-index: 1;
    margin-top: 30px;
    margin-left: -22px;
}

.ganges-icon:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #3498db;
  }

.ganges-head {
    width: 100%;
    padding-top: 30px;
}
.ganges-head h2{
    background: #3498db;
    color: #fff;
    padding: 5px 15px;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}
.ganges-title p{
    font-size: 15px;
    color: #777;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
    margin-top: 15px;
}

/* start chenab house */

.h-chenab{
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.5s ease-in-out;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 1s forwards;
    border: 1px dashed #28a745;
    background: #e9ffee;
}
/* .h-chenab:hover {
    transform: scale(1.04);
    border-bottom: 5px solid #28a745;
    transition: all 0.4s;
} */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.icon-area{
   display: flex;
   gap: 20px; 
}

.chenab-icon{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #28a745;
    position: relative;
    top: -50px;
    color: #fff;
    text-align: center;
}
.chenab-icon i{
    font-size: 35px;
    color: #fff;
    position: relative;
    z-index: 1;
    margin-top: 30px;
    margin-left: -22px;
}

.chenab-icon:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #28a745;
  }

.chenab-head {
    width: 100%;
    padding-top: 30px;
}
.chenab-head h2{
    background: #28a745;
    color: #fff;
    padding: 5px 15px;
    font-size: 25px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}
.chenab-title p{
    font-size: 15px;
    color: #777;
    font-family: 'Poppins', sans-serif;
    text-align: justify;
    margin-top: 15px;
}


@media screen and (max-width: 767px){
    .container {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 1460px;
        padding: 0px 0px !important;
    }
    .satjul-head h2 {
        background: #C70039;
        color: #fff;
        padding: 5px 15px;
        font-size: 20px;
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
    }
    .satjul-head {
        width: 100%;
        padding-top: 14px;
    }
    .satjul-icon {
        width: 0;
        height: 0;
        border: 40px solid transparent;
        border-bottom-color: #C70039;
        position: relative;
        top: -50px;
        color: #fff;
        text-align: center;
    }
    .satjul-icon:after {
        content: '';
        position: absolute;
        left: -40px;
        top: 40px;
        width: 0;
        height: 0;
        border: 40px solid transparent;
        border-top-color: #C70039;
    }
    .satjul-icon i {
        font-size: 30px;
        color: #fff;
        position: relative;
        z-index: 1;
        margin-top: 23px;
        margin-left: -19px;
    }
}

























.house {
    width: 100%;
    padding: 20px;
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 1s forwards;
}
.house:hover {
    transform: scale(1.05);
}
.satluj { background: linear-gradient(45deg, #FF5733, #C70039); }
.ravi { background: linear-gradient(45deg, #FFC300, #FF5733); }
.ganges { background: linear-gradient(45deg, #3498db, #2c3e50); }
.chenab { background: linear-gradient(45deg, #28a745, #155724); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}