/*////////////////////////////////////////////////////// Responsive CSS Structure //////////////////////////////////////////////////////*/


@media (min-width: 1400px) {
.container  {max-width: 1340px;}
}

@media (min-width: 1200px) and (max-width: 1399px){
.page-title {font-size: 56px;}
.section-title {font-size: 48px;}

.feature-wrp.reverse .feature-left .big-circle {right: -26px;}
.feature-wrp.reverse .feature-left .small-circle {left: -3px;}
/* ----- Banner ----- */
.banner-wrp {padding: 100px 0;}
.big-circle {left: -26px;}
.small-circle {right: -6px;}
/* ----- Banner ----- */
}

@media (min-width: 992px) and  (max-width: 1199px){
.page-title {font-size: 52px;}
.section-title {font-size: 44px;}

.big-circle {top: -26px;}
.small-circle {bottom: -26px;}
.feature-wrp.reverse .feature-left .big-circle { width: 130px; height: 130px;right: -26px;}
.feature-wrp.reverse .feature-left .small-circle { width: 105px; height: 105px; left: -3px;}
.feature-list ul li {padding: 15px 30px;}
/* ----- Banner ----- */
.banner-wrp {padding: 80px 0;}
.big-circle {left: -26px;width: 150px;height: 150px;}
.small-circle {right: -9px;width: 120px;height: 120px;}
/* ----- Banner ----- */
/* ----- Feature 1 ----- */
.feature-wrp {padding: 60px 0;}
.feature-main .feature-left {padding-right: 8px;}
.feature-main .feature-right {padding-left: 0px;}
.feature-left .big-circle { width: 130px; height: 130px;}
.feature-left .small-circle {width: 105px; height: 105px;}
/* ----- Feature 1 ----- */
/* -----  ECC  ----- */
.ecc-wrp {padding: 68px 0;}
.ecc-card-circle {width: 70px;height: 70px;right: -12px; bottom: -12px;}
/* -----  ECC  ----- */
}

@media (max-width: 991px) {
/* button-start */
button.navbar-toggler { border: none; } 
.navbar-toggler { right: 0; top: 0px; } 
.navbar-toggler { border: none; background-color: transparent; position: relative; z-index: 9999; right: 0; } 
.navbar-collapse { position: fixed; top: 0; right: -100%; max-width: 100%; width: 100%; bottom: 0; height: 100%; overflow: auto; background-color: #fff; transition: 0.5s; z-index: 9; } 
.navbar-collapse.show { right: 0; height: auto; } 
.navbar-collapse.show::before { right: 0; } 
.navbar-collapse::before { content: ""; position: fixed; width: 100%; height: 80px; top: 0; right: -100%; background-color: #ffffff; transition: 0.5s; z-index: 9; } 
.navbar .navbar-nav { align-items: center; position: relative; top: 130px; } 
.header .navbar-nav .nav-item { padding: 20px 0; } 
.header .navbar-nav .nav-item:first-child { padding-left: 0; } 
.navbar-toggler span { background-color: #000000; width: 25px; height: 2px; display: block; margin-bottom: 5px; transition: 0.5s; position: relative; } 
.navbar-toggler.open span:first-child { top: 5px; transform: rotate(45deg); } 
.navbar-toggler.open span:nth-child(2) { display: none; } 
.navbar-toggler.open span:last-child { top: -2px; transform: rotate(-45deg); } 
.navbar-toggler:focus { box-shadow: none; }
/* button-end */
/* ----- Banner ----- */
.banner-main .row { margin-left: -0px; margin-right: -0px; } 
.banner-main .row>* { padding-left: 0px; padding-right: 0px; } 
.banner-main .grdt-1 {display: none;}
.banner-main .grdt-2 {display: none;}
.banner-main .floating-icon2 {display: none;}
.banner-main .floating-icon3 {display: none;} 
/* ----- Banner ----- */
/* ----- Feature 1 ----- */
.feature-main .row { margin-left: -0px; margin-right: -0px; } 
.feature-main .row>* { padding-left: 0px; padding-right: 0px; } 
.feature-main .grdt-1 {display: none;}
.feature-main .grdt-2 {display: none;}

.feature-one .floating-icon2 {display: none;}
.feature-one .floating-icon3 {display: none;}

.feature-wrp.feature-two .feature-main .grdt-1 {display: none;}
.feature-wrp.feature-two .feature-main .grdt-2 {display: none;}

.feature-wrp.feature-four .feature-main .floating-icon1 {display: none;}

.feature-wrp.feature-five .floating-icon3 {display: none;}
/* ----- Feature 1 ----- */

.ecc-wrp .grdt-1 {display: none;}
.ecc-wrp .grdt-2 {display: none;}
}

@media (min-width: 768px) and (max-width: 991px){
.page-title {font-size: 48px;}
.section-title {font-size: 42px;}
.right-detail {width: 100%;max-width: 560px;margin: 0 auto;text-align: center;}

.big-circle {top: -20px;}
.small-circle {bottom: -20px;}
.feature-wrp.reverse .feature-left .big-circle {width: 100px;height: 100px;right: -12px;}
.feature-wrp.reverse .feature-left .small-circle {width: 80px;height: 80px;left: -12px;}
.feature-wrp.reverse .feature-left {padding-left: 0px;}
.feature-wrp.reverse .feature-right {padding-right: 0px;}
.feature-list ul {gap: 16px;justify-content: center; align-items: center;}
.feature-list ul li {padding: 12px 25px;}

/* ----- Banner ----- */
.banner-wrp {padding: 60px 0;}
.banner-main .banner-left {padding-right: 0;}
.banner-main .banner-right {padding-right: 0;padding-top: 48px;}
.banner-icon {left: -10px;}
.big-circle {left: -12px;height: 130px;width: 130px;}
.small-circle {right: -12px;height: 100px;width: 100px;}
/* ----- Banner ----- */
/* ----- Feature 1 ----- */
.feature-wrp {padding: 48px 0;}
.feature-main .feature-left {padding-right: 0px;}
.feature-main .feature-right {padding-left: 0;padding-top: 48px;}
/* ----- Feature 1 ----- */
/* ----- ECC ----- */
.ecc-wrp {padding: 48px 0;}
.ecc-main .title-block {margin: 0 auto 38px auto;}
.ecc-card .ecc-card-img img {min-height: 250px;}
.ecc-card .ecc-name * {font-size: 18px; line-height: 24px;}
.ecc-card .ecc-time * {font-size: 16px; line-height: 24px; }
.ecc-card-circle {width: 60px;height: 60px;right: -10px; bottom: -10px;}
.ecc-wrp .flotingicon-1 {display: none;}
.ecc-wrp .flotingicon-2 {display: none;} 
/* ----- ECC ----- */
}

@media (max-width: 767px) {
body {font-size: 18px;}
.right-detail {gap: 20px;}
.right-detail {text-align: center;}

.big-circle {top: -15px;}
.small-circle {bottom: -15px;}
.feature-wrp.reverse .feature-left .big-circle {width: 80px;height: 80px;right: -8px;}
.feature-wrp.reverse .feature-left .small-circle {width: 55px;height: 55px;left: -8px;}
.feature-wrp.reverse .feature-left {padding-left: 0px;}
.feature-wrp.reverse .feature-right {padding-right: 0px;}
.feature-list ul {gap: 8px;justify-content: center; align-items: center;}
.feature-list ul li {padding: 8px 20px;font-size: 16px; line-height: 22px;}

/* ----- Banner ----- */
.banner-wrp {padding: 48px 0;}
.banner-main .banner-left {padding-right: 0;}
.banner-main .banner-right {padding-right: 0;padding-top: 40px;width: 100%;max-width: 500px;margin: 0 auto;text-align: center;gap: 20px;}
.banner-icon {left: -0px;}
.big-circle {left: -8px;top: -20px;width: 120px;height: 120px;}
.small-circle {right: -8px;bottom: -20px;width: 90px;height: 90px;}
/* ----- Banner ----- */
/* ----- Feature 1 ----- */
.feature-wrp {padding: 40px 0;}
.feature-main .feature-left {padding-right: 0px;}
.feature-main .feature-right {padding-left: 0px;}
.feature-left .big-circle {width: 80px;height: 80px;}
.feature-left .small-circle {width: 55px;height: 55px;}
.feature-main .feature-right {padding-right: 0;padding-top: 40px;}
/* ----- Feature 1 ----- */
/* ----- ECC ----- */
.ecc-wrp {padding: 40px 0;}
.ecc-main .title-block {margin: 0 auto 20px auto;}
.ecc-card .ecc-card-img {margin-bottom: 20px;}
.ecc-card .ecc-card-img img {min-height: 250px;}
.ecc-card .ecc-name * {font-size: 18px; line-height: 24px;}
.ecc-card .ecc-time * {font-size: 16px; line-height: 24px; }
.ecc-card-circle {width: 50px;height: 50px;right: -8px; bottom: -8px;}
.ecc-main .row { margin-left: -0px; margin-right: -0px; } 
.ecc-main .row>* { padding-left: 0px; padding-right: 0px; } 
/* ----- ECC ----- */
/* ----- footer ----- */
.footer {padding: 40px 0;}
.logo-box .logo-desc * {font-size: 16px;}
.links-box ul li a {font-size: 16px;}
.footer-bottom * {font-size: 16px;}
/* ----- footer ----- */
}

/*---------- Small Mobile , IPhone Start ----------*/

/*=== Screen Size = 240, 320, 360, 480, 568 ===*/
@media (min-width: 576px) and (max-width: 767px){
.page-title {font-size: 46px;}
.section-title {font-size: 40px;}
}

@media (min-width: 240px) and (max-width: 575px){
.page-title {font-size: 42px;}
.section-title {font-size: 34px;}

.logo-box .f-logo {margin: 0 -15px;}
.footer .footer-main .row { margin-left: -0px; margin-right: -0px; } 
.footer .footer-main .row>* { padding-left: 0px; padding-right: 0px; } 
.footer-main .logo-box, .links-box, .getInTouch {text-align: center;}
.social-links ul {justify-content: center;}
}

@media (max-width:424px) {}