/* ---------------------------------------------------------
(max-width: 1023px) Responsive Menu
--------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .nav-Bar {padding: 0;}
    .nav-cen{display: block;}
    .nav-rgt {width: 100%;}
    .nav-rgt ul {width: 100%; height: 0vh; visibility: hidden; opacity: 0; display: flex; flex-direction: column; transition: all ease 0.5s 0s; background-color: #181818;}
    .nav-rgt ul li {margin: 0; padding: 0 15px;}
    .nav-rgt ul li a {display: block; line-height: 32px; color: #ffffff; border-bottom: 1px dashed #666666;}
    .nav-rgt ul li:last-child {padding: 15px 0; display: flex; justify-content: center;}
    .nav-rgt ul li:last-child a {color: #181818; background-color: #ffffff;}
    .nav-rgt.nav-height ul {overflow-y: scroll; visibility: visible; opacity: 1; height: 60vh;}
}

/* ---------------------------------------------------------
(max-width: 1440/1400) || xxl (container-width = 1320)
--------------------------------------------------------- */
@media screen and (max-width:1440px) and (min-width:1400px) {

}

/* ---------------------------------------------------------
(max-width: 1399/1200) || xl (container-width = 1140)
--------------------------------------------------------- */
@media screen and (max-width:1399px) and (min-width:1200px) {
    .nav-Block {max-width: 1140px;}
    .hero-text {max-width: 1140px;}
    .hero-text .hero-rgt {width: 36%;}
    .serv-item {min-height: auto;}
    .over-item {min-height: 274px;}
    .why-item {min-height: 432px;}
}

/* ---------------------------------------------------------
(max-width: 1199/992) || lg (container-width = 960)
--------------------------------------------------------- */
@media screen and (max-width:1199px) and (min-width:992px) {
    .nav-Block {max-width: 960px;}
    .hero-text {max-width: 960px;}
    .hero-text .hero-lft {width: 60%;}
    .hero-text .hero-rgt {padding: 17px 15px 25px 15px; width: 36%;}
    .hero-case {width: 300px;}
    .hero-text .hero-rgt h2 {margin-bottom: 0; text-transform: uppercase; font-size: 20px; line-height: 30px;}
    .hero-text .hero-rgt p {margin-bottom: 8px;}
    .hero-case .hero-case-item:nth-last-child(1) {margin-bottom: 15px;}
    .serv-item {min-height: auto;}
    .your-head {margin-bottom: 7px;}
    .your-text {margin-bottom: 18px;}
    .over-item {min-height: 274px;}
    .why-item {min-height: 457px;}
    .vision-item {padding: 0;}
    .price-lft img {max-height: initial; height: 591px;}
    .key-item {min-height: 532px;}
}

/* ---------------------------------------------------------
(max-width: 991/768) || md (container-width = 720)
--------------------------------------------------------- */
@media screen and (max-width:991px) and (min-width:768px) {
    .nav-Block{max-width: 720px; align-items: center;}
    .nav-lft-btn img {max-height: 32px;}
    .nav-rgt ul li {margin: 0 8px;}
    .hero-item {margin-top: -330px; position: static;}
    .hero-text {padding-left: 0; padding-right: 0; max-width: initial; flex-direction: column;}
    .hero-text .hero-lft {width: 100%; height: 330px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: rgba(22, 22, 22, 0.5);}
    .hero-text .hero-lft h1 {margin-bottom: 5px; font-size: 30px; line-height: 40px;}
    .hero-text .hero-lft p {margin-bottom: 18px;}
    .slide-or {color: #ffffff;}
    .hero-text .hero-rgt {width: 100%;}
    .hero-Bar.owl-carousel .owl-item img {height: 330px; object-fit: cover; object-position: center center;}
    .hero-case {width: 480px;}
    .your-rgt {padding-left: 0; padding-top: 11px; text-align: center;}
    .banner-pick img {height: 330px;}
    .banner-txt h1 {font-size: 30px; line-height: 40px;}
    .over-item .over-span {font-size: 24px; line-height: 34px;}
    .over-item h2 {padding: 0 15px; font-size: 16px; line-height: 26px;}
    .vision-item {margin-bottom: 43px; padding: 0;}
    .vision-item.sub {margin-bottom: 0;}
    .price-lft img {max-height: 330px;}
    .price-lft::before {height: 330px;}
    .ups-rgt img {max-height: 330px;}
    .ups-rgt::before {height: 100%;}
    .key-item {min-height: initial;}
    .cost-Box {margin-bottom: 56px;}
    .foot-text ul {display: block; text-align: center;}
    .foot-text ul li {padding: 0 15px 12px 15px; display: inline-block;}
}

/* ---------------------------------------------------------
(max-width: 767/576) || sm (container-width = 540)
--------------------------------------------------------- */
@media screen and (max-width:767px) and (min-width:576px) {
    .head-lft {text-align: center;}
    .head-rgt {text-align: center;}
    .nav-Block{max-width: 540px; align-items: center;}
    .nav-lft-btn img {max-height: 32px;}
    .hero-item {margin-top: -260px; position: static;}
    .hero-text {padding-left: 0; padding-right: 0; max-width: initial; flex-direction: column;}
    .hero-text .hero-lft {width: 100%; height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: rgba(22, 22, 22, 0.5);}
    .hero-text .hero-lft h1 {margin-bottom: 5px; font-size: 24px; line-height: 34px;}
    .hero-text .hero-lft p {margin-bottom: 18px; font-size: 16px; line-height: 26px;}
    .slide-or {color: #ffffff;}
    .hero-text .hero-rgt {width: 100%;}
    .hero-Bar.owl-carousel .owl-item img {height: 260px; object-fit: cover; object-position: center center;}
    .hero-case {width: 480px;}
    .hero-text .hero-rgt h2 {font-size: 24px; line-height: 34px;}
    .work-head h2 {font-size: 24px; line-height: 34px;}
    .serv-head h2 {font-size: 24px; line-height: 34px;}
    .serv-item {min-height: auto;}
    .how-head h2 {font-size: 24px; line-height: 34px;}
    .how-block {gap: 50px; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);}
    .how-block::before {content: none;}
    .help-text h2 {font-size: 24px; line-height: 34px;}
    .help-text p {font-size: 16px; line-height: 26px;}
    .your-rgt {padding-left: 0; padding-top: 11px; text-align: center;}
    .your-head h2 {font-size: 24px; line-height: 34px;}
    .test-head h2 {font-size: 24px; line-height: 34px;}
    .faq-head h2 {font-size: 24px; line-height: 34px;}
    .foot-text ul {gap: 8px;}
    .foot-text ul li a {padding-left: 12px;}
    .foot-text ul li a::before {top: 10px;}
    .banner-pick img {height: 260px;}
    .banner-txt {max-width: initial; width: calc(100% - 1.5rem);}
    .banner-txt h1 {font-size: 30px; line-height: 40px;}
    .about-head h2 {font-size: 24px; line-height: 34px;}
    .why-head h2 {font-size: 24px; line-height: 34px;}
    .vision-head h2 {font-size: 24px; line-height: 34px;}
    .vision-item {margin-bottom: 43px; padding: 0;}
    .vision-item.sub {margin-bottom: 0;}
    .price-head h2 {font-size: 24px; line-height: 34px;}
    .price-lft img {max-height: initial;}
    .disc-head h2 {font-size: 24px; line-height: 34px;}
    .cont-head h2 {font-size: 24px; line-height: 34px;}
    .ups-head h2 {font-size: 24px; line-height: 34px;}
    .ups-rgt img {max-height: initial;}
    .ups-rgt::before {height: 50%;}
    .key-head h2 {font-size: 24px; line-height: 34px;}
    .key-item {min-height: initial;}
    .when-head h2 {font-size: 24px; line-height: 34px;}
    .when-block {flex-wrap: wrap; flex-direction: column;}
    .when-item {border-right: 0; border-bottom: 1px solid #ff6600;}
    .when-item:last-child {border-bottom: 0;}
    .cost-Box {margin-bottom: 58px;}
    .cost-head h2 {font-size: 24px; line-height: 34px;}
}

/* ---------------------------------------------------------
(max-width: 575) || xs
--------------------------------------------------------- */
@media screen and (max-width:575px) {
    .head-Bar {padding: 17px 0 10px 0;}
    .head-lft {margin-bottom: 2px; text-align: center;}
    .head-lft p {padding-top: 23px; background-position: top center;}
    .head-lft-btn {margin-left: 0;}
    .head-rgt {text-align: center;}
    .nav-Block{max-width: 720px; align-items: center;}
    .nav-lft-btn img {max-height: 32px;}
    .nav-rgt ul li {margin: 0 8px;}
    .hero-Box {margin-bottom: 87px;}
    .hero-Bar.owl-carousel .owl-item img {height: 480px; object-fit: cover; object-position: center center;}
    .hero-item {margin-top: -480px; position: static;}
    .hero-text {padding-left: 0; padding-right: 0; max-width: initial; flex-direction: column;}
    .hero-text .hero-lft {margin-top: -8px; padding: 0 15px; width: 100%; height: 480px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: rgba(22, 22, 22, 0.5);}
    .hero-text .hero-lft h1 {margin-bottom: 3px; font-size: 24px; line-height: 34px;}
    .hero-text .hero-lft p {margin-bottom: 13px; font-size: 14px; line-height: 24px;}
    .hero-text .hero-lft ul li:first-child {margin-bottom: 20px;}
    .slide-or {display: none;}
    .hero-text .hero-rgt {padding: 37px 15px 50px 15px; width: 100%;}
    .hero-case {width: 100%;}
    .hero-text .hero-rgt h2 {margin-bottom: 2px; font-size: 24px; line-height: 34px;}
    .hero-text .hero-rgt p {margin-bottom: 13px;}
    .hero-case .hero-case-item {margin-bottom: 20px;}
    .hero-case .hero-case-item:nth-last-child(1) {margin-bottom: 20px;}
    .work-Box {margin-bottom: 87px;}
    .work-Bar .col-xs{margin-bottom: 24px;}
    .work-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .serv-Box {margin-bottom: 87px;}
    .serv-head {margin-bottom: 43px;}
    .serv-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .serv-Bar .col-xs {margin-bottom: 24px;}
    .serv-item {min-height: auto;}
    .how-head {margin-bottom: 48px;}
    .how-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .how-block {gap: 48px; grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 1fr);}
    .how-block::before {content: none;}
    .how-pick {margin: auto auto 24px auto;}
    .how-text h3 {margin-bottom: 12px;}
    .help-text h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .help-text p {font-size: 15px; line-height: 25px; color: #666666; font-family: 'robotoregular', sans-serif;}
    .your-Box {margin-bottom: 87px;}
    .your-Bar .col-xs {margin-bottom: 37px;}
    .your-rgt {padding-left: 0; text-align: center;}
    .your-head {margin-bottom: 12px;}
    .your-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .your-head p {margin-bottom: 13px;}
    .your-text {margin-bottom: 23px;}
    .your-text h3 {margin-bottom: 12px;}
    .your-text p {margin-bottom: 12px;}
    .your-text:nth-last-child(1) {margin-bottom: 0;}
    .your-foot {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;}
    .your-foot a {margin: 0;}
    .test-Box {margin-bottom: 87px;}
    .test-head {margin-bottom: 43px;}
    .test-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .faq-head {margin-bottom: 43px;}
    .faq-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .faq-block .faq-term h3 {padding: 10px 25px 10px 15px; text-indent: 0; font-size: 16px; line-height: 26px;}
    .faq-block .faq-data {padding: 19px 15px 25px 15px;}
    .foot-text {margin-bottom: 35px;}
    .foot-text a {display: block;}
    .foot-text ul {margin: 0 auto 21px auto; display: inline-block; text-align: left;}
    .foot-text ul li {margin-bottom: 13px;}
    .foot-text ul li a::before {top: 10px;}
    .foot-info {text-align: center;}
    .foot-info ul {display: inline-block;}
    .foot-info ul li:first-child {margin-bottom: 12px;}
    .banner-pick img {height: 480px;}
    .banner-txt {max-width: initial; width: calc(100% - 1.5rem);}
    .banner-txt h1 {font-size: 24px; line-height: 34px;}
    .about-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .over-Bar .col-xs {margin-bottom: 24px;}
    .over-Bar .col-xs:last-child {margin-bottom: 0;}
    .why-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .why-Bar .col-xs {margin-bottom: 24px;}
    .why-Bar .col-xs:last-child {margin-bottom: 0;}
    .vision-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .vision-Bar .col-xs {margin-bottom: 43px;}
    .vision-Bar .col-xs:last-child {margin-bottom: 0;}
    .price-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .price-lft img {max-height: initial;}
    .price-Bar .col-xs{margin-bottom: 24px;}
    .price-Bar .col-xs:last-child{margin-bottom: 0;}
    .disc-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .disc-Bar .col-xs {margin-bottom: 24px;}
    .disc-Bar .col-xs:last-child {margin-bottom: 0;}
    .cont-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .cont-Bar .col-xs {margin-bottom: 24px;}
    .cont-Bar .col-xs:last-child {margin-bottom: 0;}
    .ups-lft {text-align: center;}
    .ups-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .ups-foot a {margin-right: 0;}
    .ups-foot a:first-child {margin-bottom: 30px;}
    .ups-Bar .col-xs {margin-bottom: 24px;}
    .ups-Bar .col-xs:last-child {margin-bottom: 0;}
    .ups-rgt img {max-height: initial;}
    .ups-rgt::before {height: 50%;}
    .key-Bar .col-xs {margin-bottom: 24px;}
    .key-Bar .col-xs:last-child {margin-bottom: 0;}
    .key-item {min-height: initial;}
    .key-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .when-block {flex-wrap: wrap; flex-direction: column;}
    .when-item {border-right: 0; border-bottom: 1px solid #ff6600;}
    .when-item:last-child {border-bottom: 0;}
    .when-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .cost-Box {margin-bottom: 58px;}    
    .cost-lft {text-align: center;}
    .cost-head h2 {margin-bottom: 12px; font-size: 24px; line-height: 34px;}
    .cost-head ul {display: inline-block;}
    .cost-head ul li {text-align: left;}
    .cost-foot a {margin-right: 0;}
    .cost-foot a:first-child {margin-bottom: 30px;}
    .cost-rgt {text-align: center;}
    .cost-pick {margin: auto auto 15px auto;}
    .cost-Bar .col-xs{margin-bottom: 24px;}
    .cost-Bar .col-xs:last-child{margin-bottom: 0;}

}

/* Advertisingagency@220 */