/* Banner Section CSS Starts */
@media only screen and (max-width: 1740px) {
    img.banner {
        content: url(../img/Front.png);
    }
}
@media only screen and (max-width: 960px) {
    img.banner {
        content: url(../img/banner-medium.png);
    }
}
@media only screen and (max-width: 560px) {
    img.banner {
        content: url(../img/banner-small.png);
    }
}
/* Banner Section CSS Ends */

/* Recognitions & Certifications Section CSS Starts */
@media only screen and (max-width: 1400px) {
    .sec-recog::before{
        background-size: 50% auto;
    }
}
@media only screen and (max-width: 1000px) {
    .sec-recog .left {
        justify-content: center;
        margin-bottom: 54px;
        text-align: center;
    }
    .sec-recog .head.lb {
        margin-right: 0;
    }
    .sec-recog .container {
        flex-direction: column;
    }
    .sec-recog::before{
        background-size: 60% auto;
    }
}
@media only screen and (max-width: 920px) {
    .sec-recog .right {
        width: 600px;
    }
    .sec-recog::before{
        background-size: 90% auto;
    }
}
@media only screen and (max-width: 700px) {
    .sec-recog .right {
        width: 100%;
    }
}
@media only screen and (max-width: 590px) {
    .sec-recog .rlogo {
        background-color: #ffffff;
        border-radius: 10px;
        width: 30%;
        height: auto;
    }
    .sec-recog::before{
        background-size: 100% auto;
    }
}
@media only screen and (max-width: 500px) {
    .sec-recog .rlogo {
        width: 44%;
    }
}
@media only screen and (max-width: 380px) {
    .sec-recog .container {
        padding-top: 40px;
    }
    .sec-recog .left {
        margin-bottom: 50px;
    }
}
/* Recognitions & Certifications Section CSS Ends */

/* Courses Section CSS Starts */
@media only screen and (max-width: 1020px) {
    .sec-courses .head {
        margin-top: 0;
        margin-bottom: 70px;
    }
}
@media only screen and (max-width: 700px) {
    .sec-courses .container {
        padding-top: 46px;
    }
    .sec-courses .head {
        text-align: center;
    }
    .sec-courses .body {
        grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
    }
}
@media only screen and (max-width: 380px) {
    .sec-courses .container {
    	padding-top: 30px;
    }
}
/* Courses Section CSS Ends */

/* About Us Section CSS Starts */
@media only screen and (max-width: 1440px) {
    .sec-about-us {
        background-image: url(../img/about-us-image-large.png);
    }
}
@media only screen and (max-width: 1240px) {
    .sec-about-us {
        background-image: url(../img/about-us-image-medium.png);
        background-size: 100% auto;
        background-position: top;
    }
    .sec-about-us .content {
        padding-left: 40px;
        padding-right: 40px;
        width: 100%;
        margin-top: 30%;
    }
    .sec-about-us .btn.know {
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (max-width: 740px) {
    .sec-about-us {
        background-size: 120% auto;
    }
}
@media only screen and (max-width: 560px) {
    .sec-about-us {
        background-size: 160% auto;
    }
    .sec-about-us .content {
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 38%;
    }
}
@media only screen and (max-width: 380px) {
    .sec-about-us .head {
        margin-bottom: 40px;
    }
    .sec-about-us .body span.txt {
        font-size: 18px;
    }
}
@media only screen and (max-width: 330px) {
    .sec-about-us .btn.know {
        width: 100%;
        box-sizing: border-box;
        line-height: 1.4;
        border-radius: 40px;
    }
    .sec-about-us .btn.know span {
        display: block;
    }
    .sec-about-us .btn.know span:first-child {
        margin-right: 0;
    }
}
/* About Us Section CSS End */

/* Why choose us Section CSS Starts */
@media only screen and (max-width: 1080px) {
    .sec-why-choose-us {
        position: relative;
    }
    .sec-why-choose-us:before {
        content: "";
        position: absolute;
        z-index:-1;
        width: 110%;
        height: 20%;
        background-color: #0d0d0d;
        top: -12%;
        left: 50%;
        transform: rotate(-5deg) translateX(-50%);
     }
    .sec-why-choose-us .container {
        flex-direction: column;
        align-items: center;
        padding-top: 10px;
    }
    .sec-why-choose-us .img-holder {
        max-width: 460px;
        width: 100%;
    }
    .sec-why-choose-us .content {
        width: 100%;
    }
    .sec-why-choose-us .head {
        margin-top: 20px;
    }
    .sec-why-choose-us .body {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .sec-why-choose-us .body .flty {
        width: 47%;
    }
}
@media only screen and (max-width: 740px) {
    .sec-why-choose-us .head {
        margin-top: 40px;
    }
    .sec-why-choose-us .body .flty {
        width: 100%;
    }
}
@media only screen and (max-width: 480px) {
    .sec-why-choose-us:before {
        top: -12%;
     }
}
@media only screen and (max-width: 380px) {
    .sec-why-choose-us .head {
        margin-top: 20px;
        margin-bottom: 60px;
    }
    .sec-why-choose-us:before {
        top: -15%;
     }
}
/* Why choose us Section CSS End */

/* Placement Assistance Process Section CSS Starts */
@media only screen and (max-width: 1080px) {
    .sec-placement-process svg.job-suitcase-icon {
        width:50%;
        margin-left: 30px;
    }
}
@media only screen and (max-width: 980px) {
    .sec-placement-process .left {
        width: 48%;
    }
}
@media only screen and (max-width: 740px) {
    .sec-placement-process .container {
    	flex-direction: column;
    	padding-top: 22px;
    	padding-bottom: 48px;
    }
    .sec-placement-process .left,
    .sec-placement-process .right {
        width: 100%;
    }
    .sec-placement-process .left .head {
    	margin-top: 0;
    	width: 90%;
    	margin-bottom: 50px;
    }
    .sec-placement-process .left {
        position: relative;
        margin-bottom: 30px;
    }
    .sec-placement-process svg.job-suitcase-icon {
        width: 180px;
        position: absolute;
        bottom: -186px;
        right: -50px;
        transform: scaleX(-1);
    }
}
@media only screen and (max-width: 560px) {
    .sec-placement-process .container {
    	flex-direction: column;
    	padding-top: 8px;
    	padding-bottom: 40px;
    }
    .sec-placement-process .pp-num {
        padding: 10px 17px;
        margin-right: 14px;
        border-radius: 8px;
        font-size: 16px;
    }
    .sec-placement-process .set .pp-num::after,
    .sec-placement-process .set-head .pp-box::after {
    	left: 20px;
    }
    .sec-placement-process .pp-box {
        padding: 14px 20px 18px;
    }
    .sec-placement-process .set .sub-box {
        font-size: 14px;
    }
    .sec-placement-process .set .pp-box::after,
    .sec-placement-process .set-last .pp-box::after {
    	top: 20px;
    }
    .sec-placement-process svg.job-suitcase-icon {
        width: 140px;
        bottom: -160px;
        right: -30px;
    }
}
/* Placement Assistance Process Section CSS End */

/* Placed Students Section CSS Starts */
@media only screen and (max-width: 700px) {
    .sec-placed .container {
        padding: 50px 0 60px;
    }
    .sec-placed .head {
        margin-left: 40px;
    }
    #cards-view-placed {
        width: 100%;
        position: relative;
        left: 0;
    }
    .sec-placed .nav-btn-group {
        justify-self: center;
    }
}
@media only screen and (max-width: 560px) {
    .sec-placed .head {
        margin-left: 20px;
        margin-bottom: 34px;
    }
}
@media only screen and (max-width: 380px) {
    .sec-placed .container {
        padding: 28px 0 40px;
    }
}
/* Placed Students Section CSS Ends */

/* Reviews CSS Starts */
@media only screen and (max-width:900px) {
    .sec-reviews .cards-container {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto max-content;
    }
    #cards-view-reviews {
        grid-row: 1 / 2;
        grid-column: 1 / 3;
    }
    .sec-reviews .nav-btn {
        margin-top: 10px;
    }
    #left-nav-btn-cards-view-reviews {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        justify-self: end;
        margin-right: 10px;
    }
    #right-nav-btn-cards-view-reviews {
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        margin-left: 10px;
    }
}
@media only screen and (max-width:560px) {
    .sec-reviews .container {
    	padding-left: 0;
    	padding-right: 0;
        padding-top: 50px;
    }
    .sec-reviews .head {
        padding: 0 20px;
        margin-bottom: 54px;
    }
    .sec-reviews .profile {
        flex-direction: column;
        gap: 4px;
    }
    .sec-reviews .info {
        height: auto;
        align-items: center;
    }
    .sec-reviews .r-name,
    .sec-reviews .r-desig {
        max-height: max-content;
    }
}
@media only screen and (max-width:500px) {
    .sec-reviews .head .txt::after {
        top: calc(100% + 16px);
    }
}
@media only screen and (max-width:380px) {
    .sec-reviews .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .sec-reviews .head {
        margin-bottom: 50px;
    }
}
/* Reviews CSS Ends */

/* Services CSS Starts */
@media only screen and (max-width:780px) {
    .sec-services .body {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 10px 0;
    }
}
@media only screen and (max-width:360px) {
    .sec-services .body {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    a.serv {
        padding-left: 0px;
        padding-right: 0px;
    }
}
/* Services CSS Ends */

/* Placements Assistance Companies Section CSS Starts */
@media only screen and (max-width:700px) {
    .sec-assist-comp .head {
        padding: 0 40px;
    }
    .sec-assist-comp .head .txt::after {
    	top: calc(100% + 16px);
    }
    .sec-placement-process .left .body {
        font-size: 16px;
    }
}
@media only screen and (max-width:500px) {
    .sec-assist-comp .head {
        padding: 0 20px;
    }
    .sec-placement-process .left .body {
        font-size: 14px;
    }
}
@media only screen and (max-width:500px) {
    .sec-assist-comp {
        padding-top: 30px;
    }
}
/* Placements Assistance Companies Section CSS Ends */

/* Placed Section CSS Starts */
@media only screen and (max-width:900px) {
    .sec-placed .nav-btn-group {
        justify-content: center;
    }
}
@media only screen and (max-width:380px) {
    .sec-placed .cards-list {
        width: 100%;
        padding-left: 0;
    }
    .sec-placed .card {
        min-width: calc(100% - 24px); 
        width: calc(100% - 24px);
    }
    .sec-placed .details {
        flex-direction: column;
        margin-top:0
    }
    .sec-placed img.p-company {
        width: 75%;
    }
}
/* Placed Section CSS End */