/*------------------------------------------------------------------
[Master Stylesheet]

Project:  Yelahanka landing page
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Footer css
2. Header strip
3. Slideshow Banner Section
4. 
5. Services Section
6. Choose us Section
7. Case study Section
8. Testimonials Section
9. Partner Section
10. FAQ's Section
11. Footer Section
*/

.img-over {
   background: url(https://www.gtecjainxeducation.com/assets/images/breadcrumbs/2.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 600px;
   display: flex;
   align-items: center
}

label {
   margin-bottom: 0 !important
}

@media only screen and (max-width:991px) {
   .img-over {
       height: 915px
   }
}

/* footer css start */

.rs-footer .footer-top {
   padding: 50px 0 25px
}

.rs-popular-courses.style1 .courses-item .content-part .bottom-part .btn-part a {
   margin-top: 10px;
   padding: 0 4px;
   background: #f3f8f9;
   border: 1px solid #21a7d0;
   display: inline-block;
   border-radius: 3px;
   color: #111;
   font-size: 12px
}

.form-popup-bg-callback {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center
}

.form-popup-bg-callback {
   position: fixed;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background-color: rgba(94, 110, 141, 0.9);
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity .3s 0, visibility 0 .3s;
   -moz-transition: opacity .3s 0, visibility 0 .3s;
   transition: opacity .3s 0, visibility 0 .3s;
   overflow-y: auto;
   z-index: 10000
}

.form-popup-bg-callback.is-visible-callback {
   opacity: 1 !important;
   visibility: visible !important;
   -webkit-transition: opacity .3s 0, visibility 0 0;
   -moz-transition: opacity .3s 0, visibility 0 0;
   transition: opacity .3s 0, visibility 0 0
}

.form-container-callback {
   background-color: #203154 !important;
   border-radius: 10px;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   padding: 10px;
   color: #fff
}

.close-button-callback {
   background: 0;
   color: #fff;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 0;
   right: 0;
   border: solid 1px #fff0
}

.form-popup-bg-callback:before {
   content: '';
   background-color: #fff;
   opacity: 1;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0
}

.form-popup-bg-brochure {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center
}

.form-popup-bg-brochure {
   position: fixed;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   background-color: rgba(94, 110, 141, 0.9);
   opacity: 0;
   visibility: hidden;
   -webkit-transition: opacity .3s 0, visibility 0 .3s;
   -moz-transition: opacity .3s 0, visibility 0 .3s;
   transition: opacity .3s 0, visibility 0 .3s;
   overflow-y: auto;
   z-index: 10000
}

.form-popup-bg-brochure.is-visible-brochure {
   opacity: 1 !important;
   visibility: visible !important;
   -webkit-transition: opacity .3s 0, visibility 0 0;
   -moz-transition: opacity .3s 0, visibility 0 0;
   transition: opacity .3s 0, visibility 0 0
}

.form-container-brochure {
   background-color: #203154 !important;
   border-radius: 10px;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
   display: flex;
   flex-direction: column;
   width: 100%;
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   padding: 10px;
   color: #fff
}

.close-button-brochure {
   background: 0;
   color: #fff;
   width: 40px;
   height: 40px;
   position: absolute;
   top: 0;
   right: 0;
   border: solid 1px #fff0
}

.form-popup-bg-brochure:before {
   content: '';
   background-color: #fff;
   opacity: 1;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0
}

@media only screen and (max-width:480px) {
   .rs-popular-courses.style1 .courses-item {
       padding: 0 !important
   }
}

@media only screen and (max-width:991px) {
   .accordion-box .block .acc-btn {
       position: relative;
       width: 100%;
       text-align: left;
       font-size: 15px;
       margin-bottom: 0;
       cursor: pointer;
       line-height: 24px;
       font-weight: 600;
       color: #111;
       padding: 0 25px;
       height: 65px;
       line-height: 25px;
       text-decoration: none !important;
       text-transform: capitalize;
       transition: all 500ms ease;
       -moz-transition: all 500ms ease;
       -webkit-transition: all 500ms ease;
       -ms-transition: all 500ms ease;
       -o-transition: all 500ms ease
   }
}

@media only screen and (max-width:480px) {
   .accordion-box .block .acc-btn {
       position: relative;
       width: 100%;
       text-align: left;
       font-size: 15px;
       margin-bottom: 0;
       cursor: pointer;
       line-height: 24px;
       font-weight: 600;
       color: #111;
       padding: 0 25px;
       height: 94px;
       line-height: 24px;
       text-decoration: none !important;
       text-transform: capitalize;
       transition: all 500ms ease;
       -moz-transition: all 500ms ease;
       -webkit-transition: all 500ms ease;
       -ms-transition: all 500ms ease;
       -o-transition: all 500ms ease
   }
}

@media only screen and (max-width:600px) {
   .img-over {
       height: 1550px !important
   }
}

@media only screen and (min-width:600px) {
   .img-over {
       height: 1300px !important
   }
}

@media only screen and (min-width:768px) {
   .img-over {
       height: 1200px !important
   }
}

@media only screen and (min-width:991px) {
   .img-over {
       height: 600px !important
   }
}

@media(min-width:992px) {
   .col-lg-2 {
       -ms-flex: 0 0 16.666667%;
       flex: 0 0 16.666667%;
       max-width: 12.666667%
   }
}

.talk-to-expert {
   margin-top: 30px;
   margin-bottom: 10px
}

@media only screen and (max-width:991px) {
   .rs-cta .cta-img img {
       min-height: 590px !important
   }
}

@media only screen and (max-width:767px) {
   .rs-cta .cta-img img {
       min-height: 620px !important
   }
}

.full-width-header .rs-header .menu-area .logo-cat-wrap {
   height: 113px
}

html {
   scroll-behavior: smooth
}

/* footer css ends */

/* header strip starts */

.container-sticky {
   position: relative
}

.sticky-img {
   position: sticky;
   top: 10px;
   right: 10px;
   z-index: 1000;
   width: 130px;
   height: auto
}

@media(max-width:1100px) {
   .sticky-img {
       display: none
   }
}

/* header strip ends */

/* <!-- banner css starts --> */

.slider1 {
   width: 100%;
   overflow: hidden;
   position: relative
}

.slides1 {
   display: flex;
   transition: transform .5s ease
}

.slide1 {
   width: 100%;
   flex: 0 0 auto
}

.slide1 img {
   width: 100%;
   height: auto
}

.prev,
.next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   text-align: center;
   line-height: 50px;
   font-size: 24px;
   z-index: 2
}

.prev {
   left: 0
}

.next {
   right: 0
}

.form-section {
   position: absolute;
   top: 50%;
   right: 5%;
   transform: translateY(-50%);
   background-color: rgba(255, 255, 255, 0.8);
   padding: 15px;
   border-radius: 5px;
   z-index: 2;
   width: 360px
}

.form-section h2 {
   margin-top: 0;
   margin-bottom: 6px
}

.form-section label {
   display: block;
   margin-bottom: 3px
}

.form-section input,
.form-section textarea {
   width: 100%;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box
}

.form-section button {
   width: 100%;
   padding: 8px;
   background-color: #007bff;
   color: #fff;
   border: 0;
   border-radius: 4px;
   cursor: pointer
}

.form-section .button-1 {
   padding: 12px
}

.form-section button:hover {
   background-color: #0056b3
}

@media(min-width:1040px) and (max-width:1140px) {
   .form-section input,
   .form-section textarea {
       width: 100%;
       padding: 8px;
       margin-bottom: 10px;
       border: 1px solid #ccc;
       border-radius: 4px;
       box-sizing: border-box
   }
   .form-section button {
       width: 100%;
       padding: 10px;
       background-color: #007bff;
       color: #fff;
       border: 0;
       border-radius: 4px;
       cursor: pointer
   }
   .form-section .button-1 {
       padding: 10px
   }
}

@media screen and (max-width:1040px) {
   .form-section {
       position: static;
       display: block;
       margin-top: 450px;
       margin-left: 20px;
       margin-bottom: 0;
       width: calc(100% - 40px)
   }
   .prev,
   .next {
       cursor: pointer;
       position: absolute;
       top: 20%;
       transform: translateY(-50%);
       width: 50px;
       height: 50px;
       background-color: rgba(0, 0, 0, 0.5);
       color: white;
       text-align: center;
       line-height: 50px;
       font-size: 24px;
       z-index: 2
   }
}

@media(max-width:480px) {
   .slide1 .img1 {
       content: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/global-career-banner-mobile.webp')
   }
}

@media(min-width:481px) and (max-width:800px) {
   .slide1 .img1 {
       content: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/global-career-banner-tab.webp')
   }
}

@media(min-width:801px) {
   .slide1 .img1 {
       content: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/global-career-banner-desktop.webp')
   }
}

@media(max-width:480px) {
   .slide1 .img2 {
       content: url('https://www.gtecjainxeducation.com/assets/banner/g-zoom-gjx-mobile.webp')
   }
}

@media(min-width:481px) and (max-width:800px) {
   .slide1 .img2 {
       content: url('https://www.gtecjainxeducation.com/assets/banner/g-zoom-gjx-tab.webp')
   }
}

@media(min-width:801px) {
   .slide1 .img2 {
       content: url('https://www.gtecjainxeducation.com/assets/banner/g-zoom-gjx-desktop.webp')
   }
}

@media(max-width:480px) {
   .slide1 .img3 {
       content: url('https://www.gtecjainxeducation.com/assets/landing-page-banners/banner-slideshow-mobile-3.webp')
   }
}

@media(min-width:481px) and (max-width:800px) {
   .slide1 .img3 {
       content: url('https://www.gtecjainxeducation.com/assets/landing-page-banners/banner-slideshow-tab-3.webp')
   }
}

@media(min-width:801px) {
   .slide1 .img3 {   
       content: url('https://www.gtecjainxeducation.com/assets/landing-page-banners/banner-slideshow-desktop-3.webp')
   }
}

@media(max-width:480px) {
   .slide1 .img4 {
       content: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/our-grp-banner-mobile.webp')
   }
}

@media(min-width:481px) and (max-width:800px) {
   .slide1 .img4 {
       content: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/our-grp-banner-tab.webp')
   }
}

@media(min-width:801px) {
   .slide1 .img4 {
       content: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/our-grp-banner-desktop.webp')
   }
}

.banner-slide-left {
   position: relative;
   width: 100%;
   height: auto;
   background-size: cover;
   background-position: center
}

.banner-slide-left {
   background-image: url('https://www.gtecjainxeducation.com/assets/landing-page-banners/banner-slideshow-desktop-3.webp')
}

.text-container-left {
   position: absolute;
   top: 50%;
   left: 47px;
   transform: translateY(-50%);
   background-color: transparent;
   color: black;
   padding: 22px;
   width: 50% !important;
   background-color: rgba(0, 0, 0, 0.26);
   padding: 10px;
   border-radius: 5px
}

.text-container-left h1 {
   margin: 0;
   font-size: 24px
}

.text-container-left p {
   margin: 0;
   font-size: 16px
}

.slider-h1 {
   font-size: 35px !important;
   line-height: 39px !important
}

.slider-p {
   font-size: 18px !important;
   line-height: 28px !important
}

.white-color-new {
   font-size: 14px !important;
   line-height: 18px !important;
   color: white
}

.banner-btn-icon {
   font-size: 12px !important;
   line-height: 20px !important;
   padding: 10px !important
}

@media(min-width:901px) and (max-width:1037px) {
   .text-container-left {
       width: 47% !important;
       left: 30px
   }
   .slider-h1 {
       font-size: 34px !important;
       line-height: 37px !important
   }
   .slider-p {
       font-size: 14px !important;
       line-height: 18px !important
   }
   .white-color-new {
       font-size: 10px !important;
       line-height: 14px !important;
       color: white
   }
   .banner-btn-icon {
       font-size: 10px !important;
       line-height: 18px !important;
       padding: 10px !important
   }
}

@media(min-width:800px) and (max-width:1040px) {
   .text-container-left {
       width: 90% !important;
       left: 30px
   }
   .slider-h1 {
       font-size: 34px !important;
       line-height: 37px !important
   }
   .slider-p {
       font-size: 14px !important;
       line-height: 18px !important
   }
   .white-color-new {
       font-size: 10px !important;
       line-height: 14px !important;
       color: white
   }
   .banner-btn-icon {
       font-size: 10px !important;
       line-height: 18px !important;
       padding: 10px !important
   }
}

@media(max-width:800px) and (min-width:481px) {
   .banner-slide-left {
       background-image: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/global-career-banner-tab.webp');
       height: auto
   }
   .text-container-left {
       left: 25px;
       padding: 15px;
       width: 90% !important
   }
   .slider-h1 {
       font-size: 24px !important;
       line-height: 28px !important
   }
   .slider-p {
       font-size: 14px !important;
       line-height: 18px !important
   }
   .white-color-new {
       font-size: 10px !important;
       line-height: 14px !important
   }
   .banner-btn-icon {
       font-size: 10px !important;
       line-height: 16px !important
   }
   .readon2.banner-style {
       padding: 12px
   }
   .col-sm-6 {
       flex: 0 0 auto;
       width: 50%
   }
}

@media(max-width:480px) {
   .banner-slide-left {
       background-image: url('https://yelahanka.gtecjainxeducation.com/image/landing-page-banner/global-career-banner.webp');
       height: auto
   }
   .text-container-left {
       left: 8px;
       right: 2px;
       padding: 12px;
       width: 95% !important
   }
   .slider-h1 {
       font-size: 18px !important;
       line-height: 21px !important
   }
   .white-color-new,
   .white-color-new p {
       font-size: 15px !important;
       line-height: 20px !important
   }
   .banner-btn-icon {
       font-size: 6px !important;
       line-height: 10px !important
   }
   .readon2.banner-style {
       padding: 2px
   }
   .button-mobile-down {
       font-size: 5px !important;
       line-height: 10px !important
   }
}

/* <!-- banner css ends --> */

/* placement section */

.placement-section {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
   background-color: #f9f9f9;
   border-radius: 8px;
   overflow: hidden;
   position: relative
}

.placement-slideshow {
   display: flex;
   transition: transform .5s ease-in-out
}

.placement-page {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   min-width: 100%;
   margin: 10px
}

.placement-card {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   padding: 16px;
   transition: transform .3s ease, box-shadow .3s ease;
   text-align: center
}

.placement-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)
}

.placement-card img {
   width: 100px;
   height: 150px;
   object-fit: cover;
   margin-bottom: 15px
}

.placement-card h3 {
   margin: 0 0 10px;
   font-size: 18px;
   color: #333
}

.placement-card p {
   margin: 5px 0;
   font-size: 15px;
   color: #666
}

.arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: transparent;
   color: black;
   border: 0;
   padding: 10px;
   cursor: pointer;
   border-radius: 50%;
   z-index: 10
}

.arrow.left {
   left: 10px
}

.arrow.right {
   right: 10px
}

.arrow:hover {
   background-color: rgba(0, 0, 0, 0.7);
   color: white
}

@media(max-width:768px) {
   .placement-page {
       grid-template-columns: 1fr
   }
}