/* only ipad 1024 and bigger screen landscape screen */
@media only screen and (min-width: 768px) {
}

/*==========================================================================================================*/
@media only screen and (max-width: 1600px) {
  .project-section .bottom-section li .btn {
    padding: 5px 8px;
  }

  .contact-us-section .container-fluid {
    padding: 0 100px;
  }

  #mainbanner .banner-info h1 {
    font-size: 48px;
  }

  #mainbanner .banner-info p {
    font-size: 18px;
  }

  .section-title h3 {
    font-size: 32px;
  }
}


@media only screen and (max-width:1280px) {
  .container-fluid {
    padding: 0 30px;
  }

  .projects-section {
    padding: 40px 0;
  }

  body .projects-section .container {
    width: 100% !important;
    padding: 0 30px !important;
  }

  .about-us-section .section-title h3 {
    font-size: 60px;
  }

  #mainbanner .item {
    height: 480px;
  }

  .about-section {
    padding: 40px 0 60px;
  }


  .team-container .content-box {
    padding: 20px;
  }

  .offer-section {
    padding: 30px 0 10px;
    margin-top: -30px;
  }

  .offer-section.blog-section,
  .project-section {
    padding: 30px 0;
  }

  .project-section.xs-project-section,
  .news-section {
    padding: 30px 0 0;
  }

  #footer .top-footer {
    padding: 30px 0;
  }

  .faq-section .row {
    margin-top: 30px;
  }

  .faq-section {
    padding-bottom: 30px;
  }

  #footer .about-col .info-box {
    margin: 30px 0;
  }

  #footer .about-col,
  #footer .quick-col,
  #footer .newsletter-col {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  .how-work-section {
    padding-bottom: 30px;
  }

  
  #mainbanner .banner-info h1 {
    font-size: 32px;
  }

  .section-title h3 {
    font-size: 28px;
  }

  .accordion-button {
    padding: 20px 80px 20px 20px;
  }

  .accordion-button:not(.collapsed) {
    padding: 20px 60px 0 20px;
  }

  .accordion-body {
    padding: 20px;
  }

  
  .offer-section .col-container .section-info h4,
  .how-work-section .col-container h4 {
    font-size: 20px;
  }

  .tabbing-section .content-col .tab-content h4 {
    font-size: 24px;
  }

  .tabbing-section .content-col .tab-content p,
  .tabbing-section .content-col .tab-content li {
    font-size: 16px;
  }

  .tabbing-section .nav-tabs .nav-link {
    font-size: 20px;
  }

  .project-section .bottom-section ul {
    gap: 10px;
  }

  .contact-us-section .container-fluid {
    padding: 0 40px;
  }

  .contact-us-section .left-col,
  .contact-us-section .middle-col,
  .contact-us-section .map-col {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }

  .contact-us-section {
    padding: 30px 0;
  }

  .testimionial-section {
    min-height: inherit;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .testimonial-summary {
    font-size: 18px;
  }

  .tabbing-section .content-col .tab-content {
    padding: 30px;
  }

  .tabbing-section .content-col {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .tabbing-section .nav-col,
  .tabbing-section .image-col {
    flex: 0 0 30%;
    max-width: 30%;
  }

  .about-us-section .top-container {
    padding: 30px 30px 120px;
  }

  #mainbanner .banner-info ul {
    margin: 15px 0;
  }

  #mainbanner .banner-info li {
    flex: 0 0  33.33%;
    max-width: 33.33%;
  }

  #mainbanner .banner-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .history-list .hisotry-col {
    padding-left: 70px;
  }

  .history-list .hisotry-col figure {
    left: -53px;
  }

  .history-list .history-row:nth-child(2n) .hisotry-col figure {
    margin-left: -56px;
  }

  .history-list .history-row:nth-child(2n) .hisotry-col {
    padding-right: 70px;
  }

  .history-list .history-row {
    padding: 45px 0 0;
  }

  .history-list {
    padding-bottom: 45px;
  }

  .history-list .history-row:last-child::after {
    bottom: -60px;
  }
}

@media only screen and (max-width: 1170px) {
  .stats-cols .stats-col {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }

  .contact-us-section .get-in-touch-section {
    width: 100%;
  }

  .about-us-section .bottom-container .image-container {
    position: relative;
    width: 100%;
    height: auto;
  }

  .about-us-section .bottom-container .image-container::before {
    content: "";
    display: block;
    padding-top: 56.25%;
  }

  .about-us-section .bottom-container .col-container {
    padding-left: 0;
  }

  .how-work-slider {
    padding: 0 2px;
  }

  .project-detail-box .section-info h2 {
    font-size: 48px;
  }

  .project-detail-box .section-info h3 {
    font-size: 30px;
  }

  .project-detail-box .section-info p {
    font-size: 18px;
  }
}

@media only screen and (max-width:1024px) {

}

/*==========================================================================================================*/
@media only screen and (max-width:1023px) {
  .tabbing-section .image-col,
  #mainbanner .item .video-container {
    display: none;
  }

  .project-detail-box .section-info p {
    font-size: 16px;
  }

  .project-detail-box .section-info h2 {
    font-size: 36px;
  }

  .project-detail-box .section-info h3 {
    font-size: 28px;
  }

  .loction-section .listing .col {
    flex: 0 0 33.33%;
    max-width: 33.33%;
  }

  .project-detail-box .section-info {
    width: 100%;
  }

  .row-grids .col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .about-us-section .section-title h3 {
    font-size: 48px;
  }

  .about-us-section .section-title h3 em {
    display: inline-block;
  }

  .how-work-slider,
  .slider-section-value .slick-list {
    padding: 0;
  }

  .tabbing-section .nav-col {
    flex: 0 0 40%;
    max-width: 40%;
  }

  .tabbing-section .content-col {
    flex: 0 0 60%;
    max-width: 60%;
  }

  .section-title {
    margin: 0 0 20px 0;
  }

  .about-section .col-container {
    padding: 0;
    text-align: center;
  }

  .about-us-section .section-title {
    margin: 0 0 30px;
  }

  .testimionial-section {
    padding-left: 0;
  }
  
  .about-section .content-col,
  .about-section .image-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-section .content-col {
    margin: 0 0 30px;
  }
  
  .how-work-section .slick-list {
    padding: 0;
  }

  .team-container .image-container,
  .team-container .content-box {
    width: 100%;
    position: relative;
  }

  .team-container .image-container {
    height: 300px;
  }

  .team-container .social {
    padding: 0 20px 20px;
  }

  .team-container .col-container {
    padding: 0;
    height: auto;
  }

  .team-container .col-container:hover .card-inner {
    transform: none;
  }

  .team-container .card-front, .team-container .card-back {
    position: relative;
    padding-left: 0;
  }

  .team-container .card-back {
    display: none !important;
  }

  .latest-news-section .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #footer .row {
    margin: 0;
  }

  .offer-section .col-container .section-info {
    padding: 70px 20px 20px;
  }

  #footer .newsletter-col {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 20px;
    padding: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.25);
  }

  #footer .quick-col,
  #footer .about-col  {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #mainbanner .banner-info {
    width: 100%;
    padding: 0 30px;
  }

  #header .right-col {
    position: relative;
  }

  .about-us-section .info-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-us-section .top-container {
    padding: 30px 0 120px;
  }

  .about-us-section .bottom-container {
    padding: 0 0 40px;
  }

  .how-work-section .item {
    padding: 0 2px;
  }

  .menu-header { position:absolute; margin:0; padding:10px; list-style:none; left:0; width:60%; position:fixed; height:100%; transform:translateX(-100%); -webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); top:0; background:#11274d; z-index:250; -moz-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -o-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -ms-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000);  }
	.menu-header li { float:none; margin:0; padding:0; }
	.menu-header li a { padding:8px 15px; display:block; color:#fff;  }
	.menu-header li a:after { display:none; }
	
	.menu-header.navopen { transform:translateX(0); -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0);  }
	.menu-header li a:hover { border:0; color:#fff; text-decoration:none; }
	.menu-header li.current-menu-item a { font-weight:700; }
	
	/* Responsive Menu line icon*/
	
	#menu { position: absolute; right: 0; width:22px; height:22px; top:-10px; }
	.menulines-button { padding:0; cursor: pointer; user-select: none; text-transform:uppercase; font-size:16px; color:#6e819e; text-decoration:none; }
	.menulines-button em { font-style:normal; font-weight:bold; margin-left:10px; }
	.menulines-button:hover { text-decoration:none; }
	.menulines { display: inline-block; width: 20px; height: 3px; background:#6e819e; position: relative; float: left; margin:9px 0 0 0; -moz-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -ms-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); opacity:1; }
	.menulines:before, .menulines:after { display: inline-block; width:20px; height: 3px; background: #6e819e; position: absolute; left: 0; content:''; -moz-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -ms-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); transition:all 550ms cubic-bezier(0.450, 1.000, 0.320, 1.000); -webkit-transform-origin: 0.28571rem center; -moz-transform-origin: 0.28571rem center; -ms-transform-origin: 0.28571rem center; transform-origin: 0.28571rem center; }
	.menulines:before, .menulines:after { background:#6e819e; }
	.menulines:before { top: 7px; }
	.menulines:after { top: -7px; }
	.menuopen .menulines { background:none; }
	.menuopen .menulines:before, .menuopen .menulines:after {  -webkit-transform-origin: 50% 50%;  -moz-transform-origin: 50% 50%;  -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 0; } 
	.menuopen .menulines:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } 
	.menuopen .menulines:after {  -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); }
	
	.menu-header li { float:none; margin:0; padding:0; position:relative; }
	.menu-header li a { padding:8px 15px; display:block; color:#fff; font-size:16px;   }
	.menu-header li a:after { display:none; }
	
  
	.menu-header li a:hover { border:0; color:#fff; text-decoration:none; }
	.menu-header li.current-menu-item > a { text-decoration:underline; }
	
	
	.navtrigger { z-index:25; display:block; position:absolute; right:0; top:0;  cursor:pointer; text-indent:-999em; width:40px;  height:40px; }
	.navtrigger:before { content:""; width:24px; height:24px; border-radius:100%; left:0; right:0; bottom:0; top:0; margin:auto; position:absolute; background:rgba(0,0,0,.15); }
	.navtrigger:after { content:""; width:0; height:0; border-top:5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent; position:absolute;  left:0;  right:0; bottom:0; margin:auto; top:2px;  }	
		
	.navtrigger.open:after { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); top:-2px; }
	.menu-header li .sub-menu { width:100%; position:relative; font-size:16px; display:none; position:relative; margin:0 0 10px; padding:0;  background:rgba(0,0,0,.25);  }
	.menu-header li:nth-last-child(2) .sub-menu, .menu-header li:last-child .sub-menu  { left:auto; right:0; }

  .contact-us-section .left-col,
  .contact-us-section .middle-col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .contact-us-section .map-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .contact-us-section .map-col iframe {
    height: 460px !important;
  }

  .testimionial-section::before {
    display: none;
  }

  .how-work-slider .slick-list::before,
  .how-work-slider .slick-list::after {
    display: none;
  }

  .loction-section .row {
    margin: 0;
  }
}



/*==========================================================================================================*/
@media only screen and (max-width: 767px) {
  #mainbanner .item {
    height: 568px;
  }

  .history-list .hisotry-col .year {
    width: 56px;
    height: 56px;
    font-size: 14px;
  }

  .project-section .slider-section .slick-list:before,
  .project-section .slider-section .slick-list:after {
    display: none;
  }

  .our-value-section .slider-section-offering .slick-list::before,
  .our-value-section .slider-section-offering .slick-list::after,
  .slider-section-value .slick-list::before,
  .slider-section-value .slick-list:after {
    display: none
  }

  .project-section.xs-section .slider-section .slick-list:before,
  .project-section.xs-section .slider-section .slick-list:after {
    display: none
  }

  .loction-section .listing .col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  
  .slider-section-offering .slick-list::before, 
  .how-work-slider .slick-list::before, 
  .slider-section .slick-list::before, 
  .team-container .slick-list::before, 
  .slider-section-value .slick-list::before,
  .slider-section-offering .slick-list::after, 
  .how-work-slider .slick-list::after, 
  .slider-section .slick-list::after, 
  .team-container .slick-list::after, 
  .slider-section-value .slick-list::after {
    display: none;
  }

  .about-us-section .bottom-container .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .about-us-section .bottom-container .col:last-child {
    margin-top: 20px;
  }

  .tabbing-section .nav-col,
  .tabbing-section .content-col,
  .tabbing-section .content-col .tab-content li {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .tabbing-section .nav-col {
    padding: 20px 0;
  }

  .tabbing-section .nav-tabs .nav-item:first-child .nav-link {
    border-top: 0 !important;
  }

  .project-section .bottom-section li .btn {
    padding: 5px 8px;
  }

  .stats-cols .stats-col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .latest-news-section .content-box {
    padding-left: 0;
    position: static;
  }

  .latest-news-section .content-box .date  {
    font-size: 16px;
    text-align: left;
    width: auto;
    position: relative;
  }

  .latest-news-section .content-box .date em {
    display: inline-block;
    border: 0;
    margin-top: 5px;
    margin-left: 5px;
    padding-top: 0;
    vertical-align: middle;
  }

  #mainbanner .banner-info h1 {
    font-size: 28px;
  }

  .offer-section .slick-list, 
  .project-section .slick-list, 
  .team-container .slick-list{
    padding: 0;
    margin: 0 -20px;
  }

  body .slick-dots li.slick-active button {
    background-color: var(--green);
  }

  .offer-section .col-container, 
  .project-section .col-container {
    box-shadow: 0 8px 16px rgba(0,0,0, 0.15);
  }

  .offer-section .item, .project-section .item {
    padding: 0 15px 40px;
  }

  .offer-section.blog-section .col-container, 
  .project-section .col-container {
    padding-bottom: 60px;
  }

  #footer .quick-col,
  #footer .about-col  {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }

  .faq-section .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .faq-section .col:first-child {
    margin-top: 30px;
  }

  #footer .quick-col {
    margin-top: 20px;
     padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.25);
  }

  #footer .top-footer .quick-col ul {
    display: inline-flex;
  }

  #footer .top-footer .quick-col li {
    flex: 0 0 auto;
    max-width: inherit;
  }

  .contact-us-section .left-col,
  .contact-us-section .middle-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .offer-section .slick-active .col-container, 
  .our-value-section .slick-active .col-container {
    box-shadow: 0 8px 16px rgba(0,0,0, 0.15);
  }

  #mainbanner .banner-info li {
    flex: 0 0  50%;
    max-width: 50%;
  }

  .about-us-section .section-title h3 {
    font-size: 36px;
  }

  .history-list::before {
    left: 0;
    transform: none;
  }

  .history-list .history-row:nth-child(2n) .hisotry-col .year {
    margin-left: 0;
  }

  .history-list .hisotry-col .year,
  .history-list .history-row:nth-child(2n) .hisotry-col .year {
    left: -14px;
  }

  .history-list .history-row:first-child::before, 
  .history-list .history-row:last-child::after {
    left: 77px;
  }

  .history-list .history-row:nth-child(2n) .hisotry-col {
    padding-right: 0;
  }

  .history-list .hisotry-col,
  .history-list .history-row:nth-child(2n) .hisotry-col {
    padding-left: 150px;
    text-align: left;
  }
}

@media only screen and (max-width: 578px) {
  #menu {
    top: -27px;
  }
}

/*==========================================================================================================*/
/* only iphone4 landscape & Potriat 300 by 480*/
@media only screen and (max-width: 568px) {
	#mainbanner .buttons {
    flex-direction: column;
  }

  .history-list .hisotry-col .year, .history-list .history-row:nth-child(2n) .hisotry-col .year {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    margin: 0 0 30px; 
  }

  .row-grids .col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .latest-news-section .col-container figure {
    position: relative;
    margin-bottom: 20px;
  }

  .latest-news-section .col-container {
    padding-left: 0;
  }

  .stats-cols .stats-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  #mainbanner .banner-info h1 {
    font-size: 26px;
  }

  #mainbanner .banner-info p {
    font-size: 16px;
  }

  .loction-section .listing .col-container h4 {
    font-size: 20px;
  }

  #mainbanner .banner-info li {
    font-size: 15px;
    margin: 5px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #mainbanner .banner-info p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .history-list .hisotry-col, .history-list .history-row:nth-child(2n) .hisotry-col {
    padding-left: 60px;
  }

  .history-list::before {
    left: 10px;
  }

  .history-list .history-row:first-child::before, .history-list .history-row:last-child::after {
    left: 24px;
  }

  .loction-section .listing .col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/*==========================================================================================================*/
/* only iphone landscape 340 by 478*/
@media only screen and (max-width: 480px) {
}

/*==========================================================================================================*/
/* only iphone portrait 300 by 479*/
@media only screen and (max-width: 479px) {

} 

/*==========================================================================================================*/
/* Retina css */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2) {

}