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

@media (min-width: 1200px) and (max-width: 1920px){

}



@media (min-width: 1500px) and (max-width: 1599px) {

    .main-title { font-size: 47.6px; line-height: 54px; }

}



@media (min-width: 1400px) and (max-width: 1499px) {

    .main-title { font-size: 47.6px; line-height: 54px; }

    .sub-title { font-size: 34px; line-height: 38px; }



    .text-section .main-title { font-size: 50px; line-height: 54px; margin: 0 0 40px; }

    .text-wrp { padding: 100px 48px 70px; }

}



@media (min-width: 1300px) and (max-width: 1399px) {

    .main-title { font-size: 40.6px; line-height: 48px; }

    .projects-content .main-title { padding: 0 0 25px; }

    .sub-title { font-size: 30px; line-height: 36px; }



    .text-section .main-title { font-size: 44px; line-height: 48px; margin: 0 0 30px; }

    .text-wrp { padding: 80px 48px 50px; }

    .faq-wrp { padding: 67px 48px 110px; }

}



@media (min-width: 1200px) and (max-width: 1299px) {

    .main-title { font-size: 40.6px; line-height: 48px; }

    .projects-content .main-title { padding: 0 0 25px; }

    .sub-title { font-size: 30px; line-height: 36px; }



    .text-section .main-title { font-size: 44px; line-height: 48px; margin: 0 0 30px; }

    .text-wrp { padding: 80px 48px 50px; }

    .faq-wrp { padding: 67px 48px 110px; }

}



@media (min-width: 992px) and (max-width: 1199px) {

    .main-title { font-size: 34.6px; line-height: 42px; }

    .slide-count { font-size: 16px; line-height: 18px; }

    .sub-title { font-size: 24px; line-height: 32px; }



    .projects-content .main-title { padding: 0 0 25px; }

    .projects-section { left: 32px; right: 32px; bottom: 32px; }

    .project-info-block span {padding: 0 0 15px;}

    .projects-content .slide-count { padding: 0 0 10px; }

    .project-info-block { padding: 0 50px 0 0; }

    /* .project-detail { font-size: 17px; line-height: 23px; } */

    .project-tag ul li {margin: 0 12px 0 0;}

    .projects-item {margin: 0 5px;}



    .faq-wrp .section-title { padding: 0 0 30px; }

    .section-title { font-size: 34px; line-height: 36px; }

    .faq-img { max-width: 400px; top: -110px; }

    .faq-text { font-size: 17px; line-height: 18px; }

    .faq-block { padding: 19px 0; }



    .project-main-title .main-title { font-size: 40px; line-height: 40px; } 

    .projects-item .project-main-title {left: 32px;}



    .text-section .main-title { font-size: 36px; line-height: 42px; margin: 0 0 25px; }

    .text-wrp { padding: 70px 48px 40px; }

    .faq-wrp { padding: 40px 48px 110px; }

    .portfolio-wrp { padding: 40px 48px 0; }



    .bottom-text { padding: 0 48px 70px; }

}



@media (min-width: 768px) and (max-width: 991px) {

    .main-title { font-size: 30.6px; line-height: 38px; }

    .slide-count { font-size: 16px; line-height: 18px; }

    .sub-title { font-size: 20px; line-height: 28px; }

    .sub-text {font-size: 18px; line-height: 20px;}



    .projects-content .main-title { padding: 0 0 25px; }

    .projects-section { left: 26px; right: 26px; bottom: 26px; flex-direction: column; align-items: flex-start; }

    .project-tag {width: 100%;}

    .project-tag ul {justify-content: flex-end;}

    .project-info-block span {padding: 0 0 15px; font-size: 14px;}

    .projects-content .slide-count { padding: 0 0 10px; }

    .project-info-block { padding: 0 30px 0 0; }

    /* .project-detail { font-size: 14px; line-height: 18px; } */

    .project-tag ul li {margin: 0 10px 0 0; font-size: 11px; line-height: 14px; padding: 5px 8px;}

    .projects-item {margin: 0 5px;}



    .faq-wrp .section-title { padding: 0 0 30px; }

    .section-title { font-size: 30px; line-height: 32px; }

    .faq-img { max-width: 100%; top: -110px; display: block; position: relative; top: 0; right: 0; transform: translate(0) !important; -webkit-transform: translate(0) !important; -moz-transform: translate(0) !important; -ms-transform: translate(0) !important; -o-transform: translate(0) !important; }

    .faq-text { font-size: 17px; line-height: 18px; position: relative; }

    .faq-block { padding: 19px 0; position: relative; }

    .faq-block:hover .faq-text {margin: 0;}

    .faq-block .faq-img {margin: 0; display: none;}

    .faq-block.open .faq-text {margin: 0 0 20px;}

    .faq-block .faq-text::before { content: ""; background-color: #1d1d1d; width: 16px; height: 0.75px; position: absolute; right: 0; top: 50%; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); }

    .faq-block .faq-text::after { content: ""; background-color: #1d1d1d; height: 16px; width: 0.75px; position: absolute; right: 7.5px; top: 50%; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); }

    .faq-block.open .faq-text::before { transform: translate(0, -50%) rotate(360deg); -webkit-transform: translate(0, -50%) rotate(360deg); -moz-transform: translate(0, -50%) rotate(360deg); -ms-transform: translate(0, -50%) rotate(360deg); -o-transform: translate(0, -50%) rotate(360deg); }

    .faq-block.open .faq-text::after { transform: translate(0, -50%) rotate(270deg); -webkit-transform: translate(0, -50%) rotate(270deg); -moz-transform: translate(0, -50%) rotate(270deg); -ms-transform: translate(0, -50%) rotate(270deg); -o-transform: translate(0, -50%) rotate(270deg); }

    .faq-wrp { padding: 40px 30px 80px; }



    .project-main-title .main-title { font-size: 38px; line-height: 38px; } 

    .projects-item .project-main-title {left: 26px;}

    .projects-content .common-detail { padding: 0 0 30px; }

    .project-row {padding: 30px 0 0;}



    .text-section .main-title { font-size: 30px; line-height: 38px; margin: 0 0 25px; }

    .text-wrp { padding: 60px 30px 30px; }

    /* .faq-wrp { padding: 40px 48px 110px; } */

    .portfolio-wrp { padding: 40px 30px 0; }

    .portfolio-services ul li {font-size: 14px; line-height: 16px; padding: 8px 20px; margin: 0 6px 8px 0;}

    .roi-wrp h4{font-size: 16px;}

    .bottom-text { padding: 0 30px 70px; }

    .portfolio-services .sub-text {flex: 0 0 25%;}

    .portfolio-block { margin: 0 0 30px; }



    .projects-content {margin: 0;}

    section#prap9>.row>.col-md-6{

        width: 100%;

    }

}



@media (min-width: 768px) {

}



@media (max-width: 767px) {

    .res-block{

        display: block;

    }

    body {letter-spacing: -0.1125px;}

    .slide-count { font-size: 14.28px; line-height: 18px; width: 50%; }

    .main-title { font-size: 21px; line-height: 30px; }

    .common-detail {font-size: 14px; line-height: 20px;}

    .sub-title { font-size: 18px; line-height: 24px; }



    .project-top-title {display: flex; align-items: center;  padding: 0 0 30px;}

    .project-info-block span {font-size: 13px; line-height: 16px; letter-spacing: -0.1125px; padding: 0 0 10px;}

    /* .project-detail { font-size: 14px; line-height: 20px; } */

    .project-info-block {width: 50%; padding: 0 30px 30px 0;}

    .project-info-wrp {flex-wrap: wrap;}

    .project-tag ul li {font-size: 10px; line-height: 10px; padding: 7px 10px; margin: 0 10px 0 0;}

    .project-tag {padding: 0 0 20px;}



    /* .cards-wrp {position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center;}

    .card-items {width: 100%; height: 100vh; position: absolute;}

    .card-items-1 {left: 0; top: 0;}

    .card-items-2 {left: 35px; top: 35px;}

    .card-items-3 {left: 70px; top: 70px;}

    .card-items-4 {left: 90px; top: 90px;}

    .card-items-5 {left: 110px; top: 110px;} */



    .faq-wrp .section-title { padding: 0 0 20px; }

    .section-title { font-size: 26px; line-height: 30px; }

    .faq-img { max-width: 100%; top: -110px; display: block; position: relative; top: 0; right: 0; transform: translate(0) !important; -webkit-transform: translate(0) !important; -moz-transform: translate(0) !important; -ms-transform: translate(0) !important; -o-transform: translate(0) !important; }

    .faq-text { font-size: 15px; line-height: 16px; position: relative; }

    .faq-block { padding: 16px 0; position: relative; }

    .faq-block:hover .faq-text {margin: 0;}

    .faq-block .faq-img {margin: 0; display: none;}

    .faq-block.open .faq-text {margin: 0 0 20px;}

    .faq-block .faq-text::before { content: ""; background-color: #1d1d1d; width: 16px; height: 0.75px; position: absolute; right: 0; top: 50%; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); }

    .faq-block .faq-text::after { content: ""; background-color: #1d1d1d; height: 16px; width: 0.75px; position: absolute; right: 7.5px; top: 50%; transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); }

    .faq-block.open .faq-text::before { transform: translate(0, -50%) rotate(360deg); -webkit-transform: translate(0, -50%) rotate(360deg); -moz-transform: translate(0, -50%) rotate(360deg); -ms-transform: translate(0, -50%) rotate(360deg); -o-transform: translate(0, -50%) rotate(360deg); }

    .faq-block.open .faq-text::after { transform: translate(0, -50%) rotate(270deg); -webkit-transform: translate(0, -50%) rotate(270deg); -moz-transform: translate(0, -50%) rotate(270deg); -ms-transform: translate(0, -50%) rotate(270deg); -o-transform: translate(0, -50%) rotate(270deg); }

    .faq-wrp { padding: 40px 20px 50px; }  

    .project-detail { font-size: 14px; line-height: 20px; }



    .text-section .main-title { font-size: 30px; line-height: 38px; margin: 0 0 20px; }

    .text-wrp { padding: 50px 20px 20px; }

    /* .faq-wrp { padding: 40px 48px 110px; } */

    .portfolio-wrp { padding: 30px 20px 0; }

    .portfolio-services ul li {font-size: 16px; line-height: 18px; padding: 14px 16px 9px 16px; margin: 0 6px 8px 0;}



    .bottom-text { padding: 0 20px 70px; }

    .portfolio-services .sub-text {flex: 0 0 25%; padding: 0px 0 20px;}

    .portfolio-block { margin: 0 0 20px; }



    .card-items { margin: 30px 6.5px 0; }

    .clear-capital-wrp .faq-text, .clear-capital-wrp h4 {font-size: 18px; line-height: 22px;}

    .clear-capital-img { width: 45px; height: 45px; }

    .clear-capital-wrp {padding: 15px;}

    .portfolio-services {padding: 15px; flex-wrap: wrap;}

    .roi-wrp .project-row {border-top: none;}

    .roi-wrp {flex-wrap: wrap; padding: 15px;}

    .roi-wrp .sub-text {padding: 0 0 15px;}



    .projects-content {margin: 0;}

    section#prap9, section.faq-wrp {

        padding-top: 30px;

    }

    .icon-scroll-wrap {

        display: none;

    }

    .project-page-content .content {

        overflow: unset;

    }

    div#ball2, div#cursor-text2,  div#ball, div#cursor-text {

        display: none;

    }

    .project-detail>p {

        min-height: unset;

    }

    section#prap9>.row>.col-md-6 {

        padding: 10px;

    }

    .faq-block:hover .faq-text {

        opacity: 1;

    }

}



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



/*=== Screen Size = 240, 320, 360, 480, 568 ===*/

@media (min-width: 576px) and (max-width: 767px) {

    .main-title { font-size: 26px; line-height: 34px; }

    .slide-count { font-size: 15px; line-height: 18px; }



    .projects-content .main-title { padding: 0 0 18px; }

    .projects-section { left: 26px; right: 26px; bottom: 26px; flex-direction: column; align-items: flex-start;}

    .project-info-block span {padding: 0 0 15px; font-size: 14px;}

    .projects-content .slide-count { padding: 0 0 10px; }

    .project-info-block { padding: 0 30px 0 0; }

    /* .project-detail { font-size: 14px; line-height: 18px; } */

    .project-tag ul li {margin: 0 10px 0 0; font-size: 11px; line-height: 14px; padding: 5px 8px;}

    .projects-item {margin: 0 5px; }

    .project-info-wrp {padding: 0 0 30px;}

    .projects-item:first-child { margin-left: 12px; }



    .projects-item .project-main-title {left: 26px; top: 26px;}

    .project-main-title .main-title { margin: 0 0 12px; font-size: 32px; line-height: 36px; }

    .projects-content .common-detail { padding: 0 0 30px; }

    .project-row { padding: 30px 0 0; }

}



@media (max-width: 575px) {

    .project-detail {color: #000;}

    .project-tag ul li {color: #000; border-color: #000;}



    .projects-section { position: relative; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: flex-start; }

    .common-detail {color: #000;}

    .project-main-title .main-title {color: #000; font-size: 32px; line-height: 36px; margin: 0 0 10px;}

    .projects-content .common-detail { padding: 0 0 25px; }

    .project-row { padding: 25px 0 0; border-top: 1px solid #000; }

    .project-main-title {padding: 0 0 30px;}

    .project-row .project-detail { margin: 0 0 20px; }

}

@media (min-width: 2435px) {

    #prap9>.row>div:nth-child(6) .portfolio-services {

        min-height: 167px;

    }

    .portfolio-services ul li{

        align-self: baseline;

    }

}