@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');



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

body {font-family: 'Ubuntu', sans-serif; font-size: 16px; transition: all ease-in-out 1s; background: #013e5b;}



.container {width: 86%; margin: 0 auto;}

.container::after {content: ''; display: block; clear: both;}



header {position: absolute; top: 0; left: 0; width: 100%; padding: 12px 0; z-index: 1;}

header.fixed {background: rgba(0,0,0,.7);}

header .logo {display: inline-block; vertical-align: middle; width: 280px;}

header .contact {display: inline-block; vertical-align: middle; width: calc(100% - 280px - 8px); text-align: right; color: #fff;}

header .contact a {color: inherit; text-decoration: none;}

header .contact .box {display: inline-block; vertical-align: middle; margin-left: 20px;}

header .contact .box:nth-child(1) {margin-left: 0;}



footer {padding: 40px 0 80px; background: #2e2e2e; color: #fff;}

footer .pic {display: inline-block; width: 200px; vertical-align: middle; padding: 4px; border-radius: 4px; background: #fff;}

footer .pic img {width: 100%;}

footer .address {display: inline-block; width: calc(100% - 200px - 8px - 32px); margin-left: 32px; vertical-align: middle;}

footer h4 {font-size: 24px; margin-bottom: 28px;}

footer p {font-size: 14px; margin-bottom: 20px;}

footer a {color: inherit;}



.banner {display: block; background-image: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0), rgba(0,0,0,0)); height: 100vh; padding-top: 120px;}

.banner .txt {display: inline-block; width: calc(35% - 4px); vertical-align: middle; color: #fff;}

.banner .txt h1 {font-size: 36px; font-weight: 700; text-transform: uppercase; color: #fff;}

.banner .txt h2 {font-size: 24px; font-weight: 700; color: #fe0000; margin-bottom: 20px;}

.banner .txt .cta {display: inline-block; padding: 4px 0; color: #fff; border-bottom: 1px solid #fe0000; text-decoration: none; font-size: 20px;}

.banner .pic {display: inline-block; width: calc(65% - 4px - 40px); margin-left: 40px; vertical-align: middle; padding: 0 12px;}

.banner .pic img {width: 100%; border: 6px solid #fff; border-radius: 5px; transform: rotate(-5deg);}

.banner .bx-viewport {padding: 32px 0;}



#Form {display: block; width: 100%; position: fixed; bottom: 0; left: 0; padding: 8px 0; /*background-image: linear-gradient(to bottom right, #e50c15, #ffc107);*/ background: #e50c15; z-index: 100;}

#Form h2 {text-align:center;font-size: 18px;margin-bottom:5px; ; color: #fff; font-weight: 400; text-transform: uppercase; vertical-align: middle;}

#Form #fiib {display: inline-block; font-size: 22px; width: calc(100% - 132px - 4px); color: #fff; font-weight: 400; vertical-align: middle;}

#Form #fiib .field, #Form #fiib .submit {display: inline-block; width: calc((100% / 6) - 6px); vertical-align: middle; padding: 0 4px;}
#Form .field a{display: inline-block; width: calc(70px - 4px); vertical-align: middle; padding: 0 4px;background-color:#FFF;color:black;font-size:18px;text-decoration:none;}

#Form #fiib .field input[type=text], #Form #fiib .field input[type=email], #Form #fiib .field select, #Form #fiib .submit input[type=submit] {display: block; width: 100%; height: 32px; border: 0; padding: 0 4px; border-radius: 4px;}

#Form #fiib .submit input[type=submit] {background: #000; color: #fff; cursor: pointer;}

.login_bt {
    background: #000000;
    padding: 7px 15px;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    /* float: right; */
}
.mob_tab {display:none;}

.welcome {padding: 80px 0;}

.welcome .txt {display: inline-block; width: calc(45% - 4px); vertical-align: middle; text-align: justify; transition: all ease-in-out 1s; opacity: 0; font-weight: 600; color: #333; line-height: 28px;}

.welcome.active .txt {opacity: 1;}

.welcome .txt h2 {font-size: 42px; margin-bottom: 40px; font-weight: 500; text-align: left;}

.welcome .txt h2 strong {color: #e50c15;}

.welcome .txt p {margin-bottom: 20px;}

.welcome .txt p:last-child {margin-bottom: 0;}

.welcome .pic {display: inline-block; width: calc(45% - 4px); vertical-align: middle; margin-left: 10%;}

.welcome .pic img {width: 100%; opacity: 0; transform: translateY(100px); transform-origin: top right; transition: all ease-in-out 1s;}

.welcome.active .pic img {opacity: 1; transform: translateY(0);}



.courses {padding: 120px 0;}

.courses h3 {font-size: 32px; margin-bottom: 32px;}

.courses .list {display: block;}

.courses .list ul {display: block;}

.courses .list ul li {display: inline-block; width: calc(50% - 4px); text-align: center; padding-right: 20px; margin-bottom: 20px;}

.courses .list ul li .box {display: block; padding: 12px; border: 1px solid #fff; border-radius: 8px; transition: all ease-in-out .2s; cursor: pointer;}

.courses.active .list ul li .box { background: #e50c15; color: #fff;}

.courses .list ul li .box:hover {transform: scale(1.05,1.05);}

.courses .list ul li .box strong {display: block; font-size: 24px;}

.courses .list ul li .box .txt {font-size: 16px; font-weight: 500;}

.courses .list ul li .box .duration {font-size: 14px; font-style: italic;}



.why {padding: 120px 0;}

.dark .why {color: #f3f3f3;}

.why h3 {font-size: 32px; margin-bottom: 32px;}

.why .wrap {display: flex; width: 100%; margin-bottom: 32px;}

.why .box {display: inline-block; width: calc(25% - 4px - 4%); vertical-align: top; margin: 0 2%; background: #fff; color: #000; padding: 24px 12px; border-radius: 12px; text-align: center; vertical-align: middle; font-weight: 500; font-size: 16px;}

.why .last {text-align: center;}



.placInter {padding: 120px 0;}

.placInter .bx-viewport {padding: 32px 0;}

.placInter h3 {font-size: 32px; margin-bottom: 32px; color:}

.placInter .pslider {padding: 24px 0;}

.placInter ul li .pic img {border: 4px solid #fff; border-radius: 4px; transform: rotate(-5deg);}

/*.placInter .placement, .placInter .internship {display: table-cell; width: 50%; padding: 60px 60px;}

.placInter .placement {background: #ffc107;}

.placInter .internship {background: #e50c15;}*/

.placInter ul li { text-align: center;}

.placInter ul li .pic {display: block; vertical-align: middle; margin-bottom: 20px;}

.placInter ul li .pic img {max-width: 300px;}

.placInter ul li .txt {width: 100%; display: inline-block; vertical-align: middle;}

.placInter ul li .txt .name {display: block; font-size: 20px; font-weight: 700;}

.placInter ul li .txt .desig {display: block; font-size: 16px; font-weight: 400;}



.opportunity {padding: 120px 0;}

.opportunity h3 {font-size: 32px; margin-bottom: 32px;}

.opportunity .list {display: block;}

.opportunity .list ul {display: block; text-align: center;}

.opportunity .list ul li {display: inline-block; padding: 20px; width: calc(33.33% - 4px - 32px); margin-right: 32px; margin-bottom: 40px; border: 1px solid #212037; border-radius: 12px; transition: all ease-in-out .2s; cursor: pointer;}

.opportunity .list ul li:hover {background: #ffc107; transform: scale(1.05,1.05);}

.opportunity .list ul li .icon {display: block; margin-bottom: 12px;}

.opportunity .list ul li .icon img {height: 100px;}

.opportunity .list ul li .txt {font-weight: 500; color: #212037; text-transform: uppercase;}



.workshop {padding: 120px 0;}

.workshop h3 {font-size: 32px; margin-bottom: 32px; text-align: center;}

.workshop .cslider ul li {text-align: center;}

.workshop .cslider ul li img {width: 100%; max-width: 600px; border: 8px solid #fff; border-radius: 8px; transform: rotate(-5deg);}

.workshop .cslider .bx-viewport {padding: 24px 10px;/* overflow: visible !important;*/}



.bod {padding: 120px 0;}

.bod h3 {font-size: 32px; margin-bottom: 32px; color: #fff;}

.bod .box {display: inline-block; position: relative; width: calc(25% - 4px - 20px); margin-right: 20px; vertical-align: top; padding: 20px 2% 20px 0; border-radius: 12px; color: #fff;}

/*.bod .box::after {content: ''; display: block; height: 50%; width: 4px; background-image: linear-gradient(to bottom right, #e50c15, #ffc107); position: absolute; top: -20px; left: 0;}*/

.bod .box .pic {display: block; margin-bottom: 20px; position: relative; padding-bottom: 20px;}

.bod .box .pic::before {content: ''; display: block; width: 50%; height: 4px; background-image: linear-gradient(to bottom right, #e50c15, #ffc107); position: absolute; bottom: 0; left: 0;}

.bod .box .name {display: block; font-size: 18px; font-weight: 700;}

.bod .box .desig {display: block; font-size: 16px; font-weight: 400;}

.bod .box .pic img {width: 100%;}



.recruiter {padding: 120px 0;}

.recruiter h3 {font-size: 32px; margin-bottom: 32px; text-align: center;}

.recruiter .list {display: block; text-align: left;}

.recruiter .list ul {display: block;}

.recruiter .list ul li {display: inline-block; position: relative; width: calc(33.33% - 4px - 20px); margin-right: 20px; vertical-align: top; padding: 12px 0; border-radius: 12px; text-transform: uppercase; font-size: 20px; font-weight: 500; margin-bottom: 12px; cursor: pointer;}

.recruiter .list ul li::before {content: ''; display: block; width: 50px; height: 2px; background-image: linear-gradient(to bottom right, #e50c15, #ffc107); position: absolute; bottom: 0; left: 0; transition: all ease-in-out .2s;}

.recruiter .list ul li:hover::before {width: 120px;}





.dark .testimonials {color: #fff;}

.testimonials {display: block; padding: 120px 0; color: #353535;}

.testimonials h3 {text-align: center; font-size: 44px;  font-weight: 400; margin-bottom: 20px; padding-bottom: calc(64px + 20px); text-transform: uppercase; background: url(../images/InvertedComma.png) center bottom no-repeat; background-size: auto 64px;}

.testimonySlider {padding:  0 64px;}

.testimonySlider .pic {display: inline-block; width: calc(30% - 4px); vertical-align: middle;}

.testimonySlider .pic img {width: 100%;}

.testimonySlider .testimony {display: inline-block; width: calc(65% - 4px); margin-left: 5%; vertical-align: middle; font-size: 24px; /*color: #0b070f;*/ font-style: italic;}

.testimonySlider .testimony p {margin-bottom: 20px;}

.testimonySlider .testimony h4.by {text-align: right; font-weight: 400;}

.testimonySlider .testimony h4.by strong {display: block;}

.testimonySlider .bx-wrapper {position: relative;}

.testimonySlider .bx-controls-direction a {position: absolute; top: 50%; transform: translateY(-50%); width: 41px; height: 78px; text-indent: 100px; overflow: hidden;}

.testimonySlider .bx-controls-direction a.bx-prev {background: url(../images/testimonyPrev.png) center no-repeat; left: -64px;}

.testimonySlider .bx-controls-direction a.bx-next {background: url(../images/testimonyNext.png) center no-repeat; right: -64px;}



.ready {display: block; padding: 80px 0; background-image: linear-gradient(to bottom right, #e50c15, #ffc107); color: #fff; text-align: center;}

.ready h1 {font-size: 40px;}



.stuWorks {padding: 120px 0;}

.stuWorks h3 {font-size: 32px; margin-bottom: 32px;}

.workWrap {display: flex;}

.stuWorks .col {display: inline-block; width: calc(50%); float: left;}

.stuWorks .col img {width: 100%;padding: 2px;}



.faqs {padding: 120px 0;}

.faqs h3 {font-size: 32px; margin-bottom: 32px;}



.accordion {display: block;}

.accordion::after {content: ''; display: block; clear: both;}

.accordion .box {border-bottom: 1px solid #ccc;}

.accordion .box h4 {font-size: 20px; display: block; padding: 12px 0; padding-right: 32px; position: relative; cursor: pointer; font-weight: 400; transition: all ease-in-out .2s;}

/*.accordion .box h4:hover {background: #f3f3f3;}*/

.accordion .box h4::before {content: '+'; font-size: 32px; position: absolute; top: 0; right: 0; width: 32px; text-align: center;}

.accordion .box .content {margin:  0 0 20px; display: none;}

.accordion .box.active h4 {color: #e50c15;}

.accordion .box.active h4::before {content: '-';}



.call_fashion {position: fixed; right: 0; bottom: 60px;}

.call_fashion img {height: 24px;}

.call_fashion > div {padding: 12px; background-image: linear-gradient(to bottom right, #0b621a, #4ced68); border: 1px solid #fff; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}

.call_fashion .call {margin-bottom: 8px;}



.call_fashion a span {display: none;}

.mobile_banner {
    display: none;
}