@import url("https://osplabs.com/wp-content/themes/osplabs/assets/css/swiper.css");

.section h2, .why-choose-us-wrapper.about h2 {font-family: "d-din_condenseddinCnBd"; font-size: 60px; text-transform: uppercase; text-align: center; color: #111; letter-spacing: 2.5px; margin-bottom: 35px }
.segment-banner-wrapper {width: 100%; height: 850px; display: flex; overflow: hidden; align-items: center; position: relative; justify-content: center; flex-direction: column; }
.segment-banner-wrapper > img{width: 100%;position: absolute;top: 0;bottom: 0;height: 100%;}
.segment-banner-wrapper h1 {position: relative; font-family: "d-din_condenseddinCnBd"; font-size: 66px; text-align: center; line-height: 60px; width: 55%; color: #ffffff; }
.sectionBoxOne {width: 100%; max-width: 1600px; margin: 45px auto; }
.sectionBoxOne h2 {font-size: 76px; font-family: "d-din_condenseddinCnBd"; color: #1a6df8; font-weight: bold; letter-spacing: 5px; margin-bottom: 15px; line-height: normal; }
.sectionBoxOne p {font-size: 24px; letter-spacing: 0px; line-height: 24px; color: #333333; font-family: "Roboto", sans-serif; text-align: center; width: 100%; padding-bottom: 50px; }
.gridBox {display: flex; justify-content: space-between; }
.gridBox .gridBoxContainerIcon {width: 100px; height: 100px; margin: 0px auto; border: 1px solid #1a6df8; border-radius: 50px; text-align: center; padding: 20px; display: flex; align-items: center; justify-content: center; }
.gridBox h2 {font-size: 22px; line-height: 24px; font-family: "d-din_condenseddinCnBd"; color: #1a6df8; text-align: center; padding: 20px 15px; text-transform: none; letter-spacing: 2px;}
.gridBox .gridBoxContainer {text-align: center; padding: 10px; padding-top: 0; margin: 0px 10px; }
.gridBox .gridBoxContainer p {font-size: 16px; letter-spacing: 1px; line-height: 24px; color: #333333; font-family: "Roboto", sans-serif; text-align: center; }
.btnclass {background: #ffd100; border: 1px solid #ffd100; font-size: 18px; cursor: pointer; font-family: "Roboto"; border-radius: 30px; padding: 0 30px; height: 60px; display: inline-block; line-height: 60px; text-transform: uppercase; color: #0c1429; font-weight: 700; overflow: hidden;}
.btnclass:hover {border: 1px solid #0c1429; color: #0c1429; background: transparent; }
.btnclass i {position: relative; left: 50%; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.btnclass:hover i {left: 4%; }
section.osp-Full-Box {width: 100%; padding-top: 0px; }
.bluebox {background: #1a6df8; }
.bluebox h2 {color: #fff; font-family: "d-din_condenseddinCnBd"; text-transform: uppercase; padding: 50px 0 10px 0px; text-align: center; margin: 0px; line-height: 60px; }
.bluebox p {font-size: 21px; color: #fff; font-family: "Roboto"; font-weight: 400; letter-spacing: 1px; margin: 0px; padding-top: 15px; }
.blueboxImg {background: url("../../img/arrow_bg.png"); height: 167px; }
.rotationRight {-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
.carouselBox {width: 1300px; margin: 0 auto }
.infmSection h2 {text-align: center; font-weight: bold; color: #1a6df8; font-size: 76px; line-height: 76px; font-family: "d-din_condenseddinCnBd"; text-transform: uppercase; letter-spacing: 3px; }
.infmSection p {text-align: center; font-size: 18px; color: #333333; margin-top: 30px; line-height: 22px; font-family: "Roboto", sans-serif; margin-bottom: 50px; }
.infmSection p span {display: block; max-width: 530px; margin: auto; line-height: 30px; }
#custom-pager {display: block; overflow: hidden; align-items: center; max-width: 1600px; justify-content: center;position: relative; margin: 0px auto; margin-top: 20px;}
#custom-pager li {margin: auto !important; display: flex; float: left; margin-bottom: 5px !important; margin-right: 15px !important; padding: 0px 5px 0px 15px; border: 1px solid #1a6df8; background: none; color: #0f5292; font-size: 28px; width: 225px; height: 72px;text-indent: inherit;opacity: 1;}
#custom-pager li a{color: #007bff;align-self: center;}
.largeWidth {max-width: 1600px; text-align: left; position: relative; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; transition: -webkit-transform .6s ease; transition: transform .6s ease; transition: transform .6s ease,-webkit-transform .6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px; float: none;}
.portfolio-cycle-wrapper {max-width: 100%; }
.population-cycle-wrapper {max-width: 100%; }
.portfolio-content, .portfolio-cycle-wrapper .carouselBox {width: 1400px; max-width: 100%; margin: 0 auto; left: 0; right: 0; }
.portfolio-content .flexBox {display: flex; padding-bottom: 60px; align-items: center; flex-direction: row-reverse; justify-content: space-between; }
.portfolio-first-part h3 {font-family: "d-din_condenseddinCnBd"; margin: 0; font-size: 34px; color: #c2523e; line-height: 40px; letter-spacing: 0.7px; }
.portfolio-first-part p {margin: 0; font-size: 16px; font-family: "Roboto"; color: #292929; line-height: 28px; letter-spacing: 0.7px; padding-top: 12px; }
.portfolio-second-part {width: 35%; }
.portfolio-first-part {width: 62%; }
.portfolio-first-part .btnclass {margin-top: 20px; }
.sliderNameBtn {font-size: 16px; font-family: "Roboto"; }
.pager-wrapper2 {max-width: 350px; display: flex; align-items: center; text-align: left; margin: 0 0px; width: 100%; margin: auto; }
#custom-pager li.active {color: #ffffff; background: #1a6df8; }
#custom-pager li.active a{color: #fff;}
.pager-new-wrapper:hover {background: transparent; }
.pager-content-text {font-size: 15px; letter-spacing: 0.7px; padding-left: 10px; margin-bottom: 0px; padding-top: 6px; font-family: "Roboto"; }
.providerBoxOne {max-width: 1600px; margin: 60px auto 0px; }
.contentBoxProvider {text-align: left; }
.contentBoxProvider h3 {text-align: left; font-size: 36px; letter-spacing: 1px; line-height: 48px; color: #1a6df8; font-family: "d-din_condenseddinCnBd"; margin-bottom: 20px; text-transform: uppercase;}
.contentBoxProvider p {text-align: left; font-size: 18px; font-family: "Roboto"; }
.contentBoxProvider ul {padding-left: 25px; }
.contentBoxProvider ul li {max-width: 744px; width: 100%; font-size: 18px; letter-spacing: 0px; color: #333; font-family: "Roboto", sans-serif; margin-bottom: 15px; line-height: 26px; text-align: left; }
.full_Bg_Provider {background: #1a6df8; padding: 15px 0px; }
.full_Bg_Provider .container_Porivder {max-width: 1600px; margin: 0px auto; padding-top: 90px; padding-bottom: 90px; width: 100%; }
.full_Bg_Provider .container_Porivder h2 {color: #fff; font-size: 76px; text-transform: uppercase; font-family: "d-din_condenseddinCnBd"; letter-spacing: 5px; font-weight: 400; margin-bottom: 30px; text-align: center; line-height: 76px; }
.full_Bg_Provider .container_Porivder p {color: #ffffff; font-family: "Roboto"; font-size: 24px; font-weight: 300; text-align: center; margin-bottom: 50px; }
.whiteBgBox {background: #ffffff; min-height: 300px; padding: 30px; }
.whiteBgBox h4, .whiteBgBox h3 {font-size: 26px; letter-spacing: 1px; margin-bottom: 20px; color: #1e7ef9; font-family: "d-din_condenseddinCnBd"; font-weight: 700; line-height: 26px; text-align: left; text-transform: uppercase; }
.whiteBgBox p {font-size: 16px !important; letter-spacing: 1px; color: #333 !important; font-family: "Roboto"; text-align: left; font-weight: 400 !important; text-align: left !important; margin-bottom: 0; }
.smallwidth {max-width: 1400px; width: 100%; margin: 0px auto; }
.section.contact_form_box {background: #1a6df8; width: 100%; padding: 60px 0 }
.contactUsTitle {text-align: center }
.contactUsTitle h1 {position: static; width: auto; color: #fff; font-size: 60px; font-family: "d-din_condenseddinCnBd"; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px }
.contactUsTitle p {font-size: 24px; margin-bottom: 15px; font-family: "Roboto",sans-serif; color: #fff; letter-spacing: 1px }
.contactFromBox {max-width: 940px; margin: 0 auto }
.contactFromBox .btnclass i {left: 70% }
.contactFromBox .btnclass:hover i {left: 4% }
.contactFromBox .btnclass:hover {background: #fff }
.contactFromBox input {height: 44px; border-radius: 3px; border: transparent; padding: 10px 15px; font-size: 14px; font-family: "Roboto",sans-serif }
.contactFromBox textarea {border-radius: 3px; border: transparent; padding: 10px 15px; font-size: 14px; resize: none; font-family: "Roboto",sans-serif; height: 160px }
            .contactFromBox .error {color: #fff !important }
#form2 .form-group {position: relative }
.contactUsTitle p {font-size: 24px; font-family: "Roboto",sans-serif; color: #fff; letter-spacing: 1px }

/*.footer-fixed{display: none;}*/

.work-with-img-wrap{margin: 100px auto 0;overflow: hidden;display: flex; align-items: center; justify-content: space-between;height: 91px !important;position: relative;}
.work-with-img-wrap::before, .work-with-img-wrap::after{bottom: 0; content: ""; pointer-events: none; position: absolute; top: 0; width: 50px; z-index: 10;} 
.work-with-img-wrap::before{background-image: linear-gradient(90deg,#fff 50%,hsla(0,0%,100%,0)); left: 0;} 
.work-with-img-wrap::after{background-image: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 50%);
    right: 0;}
.work-with-img-wrap img{margin: 0 140px 0 0;width: auto !important;}
.work-with-img-wrap div{max-width: 20%;display: block;margin-right: 0;}
.development-wrap {background-color: #f5f7fa; max-width: 1543px; margin: 100px auto 100px; }
.development-wrap .core-service-wrap {max-width: 1300px; padding: 100px 20px 100px; }
#form-link{display: none;}

/*hanif*/
/*FAQ Section*/
.question-box-dy{
    padding-bottom: 45px;
    padding-top:30px;
}
.question-accordion-wrapper{
        width: 100%; max-width: 1300px;  margin: 0 auto !important;  padding: 20px 20px;
}
.accordion-card{background: #FFFFFF; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.08); border-radius: 0 ; margin-bottom: 25px; border:0;}
.blue-header{ background: #FFFFFF; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.08); border-radius: 0 ; border:0;  }
.accordion-question-body { color: #1A1A1A; font-size: 1rem; font-weight:500; font-family: 'Montserrat'; }
.accordion-card li{ font-size: 1rem; font-weight: 500; color: #1A1A1A; text-align: left; font-family: 'Montserrat'; margin-bottom: 8px; }
.accordion-card ul{ padding-left: 30px; font-size: 1rem; font-weight: 500; color: #1A1A1A; text-align: left; font-family: 'Montserrat'; }
.accordion-card ol{ padding-left: 54px; font-size: 1rem; font-weight: 500; color: #1A1A1A; text-align: left; font-family: 'Montserrat';
      position: unset !important; margin: 0 !important; width: 100%;  }
.accordion-card ol li{ font-size: 1rem; font-weight: 500; color: #1A1A1A; text-align: left; font-family: 'Montserrat'; width: 100%; }
.btn-link{ font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-size: 24px; color: #1A1A1A; text-decoration: none !important; 
    text-transform: none; height: auto;}
.btn-link:hover{ text-decoration: none !important; color: #1A1A1A; }
.btn-link:focus{ box-shadow: none }
.btn-link .rm-icon{ display: none; }
.accordion-icon {color: #2571F0; margin-left: 15px;}
.btn-link[aria-expanded="true"] .rm-icon{ display: block }
.btn-link[aria-expanded="true"] .add-icon{ display: none }

/*pre section*/
.form-blue-wrap {
    background: linear-gradient(0deg, #F1F6FF, #F1F6FF), #FAFAFA;
}
.pre-section-heading:after{ display: none }
.pre-section{ margin-bottom: 15px !important;  }
.pre-section:last-child{ margin: 0 auto;  }
.pre-section-card{ background: #FFFFFF; box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.08); border-radius: 10px; border: 0 ; position: relative; }
.pre-section-card-body{ padding: 40px 20px ; padding-bottom: 93px;  }
.pre-img-wrapper{ background: #EEF4FF; border-radius: 5px; height: 85px; width: 90px; margin : 0 auto; display: flex; 
         justify-content: center; align-items: center; margin-bottom: 18px}
.pre-section-card-body h3{ font-family: 'Montserrat'; font-weight: 600; font-size: 18px; 
   text-align: center; text-transform: capitalize; color: #323232; max-width: 600px; margin-bottom: 20px; }

.accordion-wrapper .card-body{ text-align: start; }
.list-wrapper ul{ text-align: start; margin-left: 23px; list-style: none; font-family: 'Montserrat'; font-weight: 400;
font-size: 16px;  text-transform: capitalize; color: #323232; }
.list-wrapper ul li{ position: relative; margin-bottom: 15px }
.list-wrapper ul li::before {content: "\2022"; color: #2571f0; font-weight: 900; display: inline-block; width: 22px; 
    margin-left: -24px; font-size: 29px; position: absolute; top:-10px;  }
.pre-section-btn{ position: absolute; bottom : 32px; right: 0; left:0; width: 170px; margin-left: auto; margin-right: auto;}


.solution-wrapper-dy{
     width: 100%; max-width: 1300px;  margin: 0 auto !important;  padding: 20px 20px; padding-bottom: 0 !important;
}


/*hanif latest talk*/
.temp-latest-talk{ background-color: #FAFAFA; }
.segment-banner-wrapper .bann-heading-bg-color{
    padding: 12px !important;
    background-color: rgba(0,0,0,.5) !important;
}



@media screen and (max-width: 1600px) {
	.sectionBoxOne h2, .infmSection h2,.segment-banner-wrapper h1 {font-size: 60px }
    .sectionBoxOne .gridBox h2 {font-size: 22px; line-height: 27px; margin-bottom: 10px; margin-top: 10px }
}
@media screen and (max-width: 1599px) {
	.portfolio-content .flexBox {padding: 0 30px }
    #custom-pager {padding: 0 30px }
    .providerBoxOne {padding: 0 30px }
    .smallwidth {max-width: 1200px }
    .blueboxImg {margin-top: -1px }
    .section.osp-Full-Box {padding-right: 0; padding-left: 0; clear: both }
    .bluebox p {padding-right: 20px; padding-left: 20px; text-align: center}
    .bluebox h2 {line-height: 60px }
    .carouselBox {width: 85% }
    .carousel {align-items: center }
}
@media screen and (max-width: 1400px) {
    .work-with-img-wrap{margin: 70px auto 0;}
}
@media screen and (max-width: 1360px) {
	.bluebox p {padding-right: 20px; padding-left: 20px; text-align: center}
    .bluebox h2 {line-height: 60px }
    .segment-banner-wrapper {height: 650px }
}
@media screen and (max-width: 1280px) {
	.portfolio-content .flexBox {padding: 0 30px }
    #custom-pager {padding-left: 30px }
    .providerBoxOne {padding: 0 30px }
    .smallwidth {width: 1000px }
    .bluebox p {padding-right: 20px; padding-left: 20px; text-align: center }
    .bluebox h2 {line-height: 60px }
    .bluebox p {padding-right: 20px; padding-left: 20px; text-align: center }
    .segment-banner-wrapper {height: 600px }
    .segment-banner-wrapper h1 {width: 70% }
}
@media screen and (max-width: 1024px) {
	.segment-banner-wrapper h1 {font-size: 40px; width: auto; line-height: 40px }
    .gridBox {display: block }
    .gridBox .gridBoxContainer {vertical-align: top }
    .work-with-img-wrap:before, .work-with-img-wrap:after{width: 100px;}
  .work-with-img-wrap img{margin: 0 50px;}
    .segment-banner-wrapper {height: 500px }
    .section h2, .section.how-we-can-wrapper h2, .tab-slider-box h2, .sectionBoxOne h2, .osp-latest-talks .bluebox h2 {font-size: 40px; margin-bottom: 0; line-height: 40px; padding-bottom: 0; padding-top: 0 }
    .bluebox {padding: 20px }
    .bluebox p {padding-right: 20px; padding-left: 20px; text-align: center; padding-top: 0; padding-bottom: 0 }
}
@media screen and (max-width: 991px) {
	.contactFromBox {max-width: 96% }
    .smallwidth {width: 96% }
    .gridBox {flex-wrap: wrap }
    .contactUsTitle p {padding: 0 15px }
}
@media screen and (max-width: 781px) {
  .segment-banner-wrapper.ismobile{margin-top: 35px; }
}
 @media screen and (max-width: 768px) {
    #custom-pager{padding-left: 10px;}
	.btnclass, .section.osp-work-with-us .contact-segment .contactBtn, .learn-more-btn, .learn-more-btn {height: 50px; line-height: 50px }
	.smallwidth {max-width: 700px }
    .whiteBgBox {background: #fff; min-height: 300px; padding: 20px }
    .whiteBgBox h4,.whiteBgBox h3 {font-size: 22px }
    .portfolio-content .flexBox {padding: 25px }
    .providerBoxOne {padding: 25px; margin: 20px auto 0px }
    .contentBoxProvider h3 {font-size: 34px; line-height: 40px }
    .contentBoxProvider p {font-size: 16px }
    .contentBoxProvider ul li {font-size: 16px; line-height: 28px }
    .contactFromBox {max-width: 695px; margin: 0 auto }
    .section.contact_form_box {padding: 25px 0 }
    .contactUsTitle h1 {font-size: 40px }
    .contactUsTitle p {font-size: 21px }
    .full_Bg_Provider .container_Porivder {padding-bottom: 10px; padding-top: 10px }
    .full_Bg_Provider .container_Porivder h2 {font-size: 40px; line-height: 40px; margin-bottom: 5px }
    .full_Bg_Provider .container_Porivder p {margin-bottom: 20px; font-size: 21px }
    section.osp-Full-Box {padding-left: 0; padding-right: 0 }
    .blueboxImg {display: none }
    .sectionBoxOne h2 {margin-bottom: 10px }
    .sectionBoxOne p {font-size: 20px }
    .gridBox {display: block }
    .gridBox .gridBoxContainer {width: 49%; margin: 0; display: inline-block; float: left; height: 330px }
    .gridBox .gridBoxContainer {height: auto }
    .gridBox h2 {font-size: 25px; margin-bottom: 0 }
    .segment-banner-wrapper {height: 290px }
    .segment-banner-wrapper h1 {width: auto; font-size: 30px; left: 0; right: 0; line-height: normal }
    .contactFromBox .btnclass {height: 45px; line-height: 16px; font-size: 16px }
     .contentBoxProvider .btnclass,.portfolio-first-part .btnclass {height: 45px; padding: 0 20px; line-height: 45px; font-size: 16px }
     .carouselBox {margin: 20px auto 0 }
     .segment-banner-wrapper.ismobile{padding-top: 40px;}
}
@media screen and (max-width: 767px) {
	.portfolio-second-part {width: 100%; margin: 20px 0 }
    .portfolio-first-part {width: 100%; padding: 20px }
    .portfolio-content .flexBox {display: block }
    .contactUsTitle h1 {font-size: 28px; line-height: 28px; margin-bottom: 10px }
    .contactUsTitle p {font-size: 16px }
    .contactFromBox {max-width: 330px; margin: 0 auto }
    .contactFromBox .col-md-12 {text-align: center }
    .contactFromBox .btnclass {margin-top: 30px }
    .providerBoxOne {margin: 25px auto 0px }
    .contentBoxProvider {margin-bottom: 20px }
    .contentBoxProvider h3 {font-size: 22px; line-height: 26px; padding: 0 15px }
    .contentBoxProvider p {font-size: 16px; padding: 0 15px }
    .contentBoxProvider ul {padding-left: 35px }
    .contentBoxProvider ul li {font-size: 16px; line-height: 25px; max-width: 320px }
    .contentBoxProvider .btnclass {margin-left: 25px }
    .full_Bg_Provider {padding: 15px 0 0 }
    .full_Bg_Provider .container_Porivder {padding: 10px }
    .full_Bg_Provider .container_Porivder h2 {font-size: 28px; line-height: 28px; margin-bottom: 10px }
    .full_Bg_Provider .container_Porivder p {font-size: 16px; margin-bottom: 10px }
    .full_Bg_Provider .container_Porivder .smallwidth .col-md-4 {margin-top: 10px }
    .section.contact_form_box {padding: 40px 0 }
    #custom-pager li {display: block; margin-bottom: 15px !important; margin-right: 0 !important; padding: 10px; border: 1px solid #1a6df8; background: 0 0; height: auto; width: 100%}
    #custom-pager .pager-wrapper {display: block; text-align: center }
    #custom-pager .pager-content-text {padding: 0 }
    .gridBox .gridBoxContainer {width: 100%; margin: 0; display: block }
    .infmSection h2 {font-size: 36px; line-height: 36px }
    .infmSection p {margin-top: 15px; margin-bottom: 40px }
    .blueboxImg {display: none }
    .bluebox {padding: 20px 0 }
    .bluebox h2 {padding: 0; margin-bottom: 0 !important }
    .bluebox p {text-align: center; font-size: 18px }
    section.osp-Full-Box {padding-left: 0; padding-right: 0 }
    .segment-banner-wrapper {height: 400px }
    .segment-banner-wrapper h1 {font-size: 24px; line-height: 26px }
    .sectionBoxOne h2 {font-size: 34px }
    .sectionBoxOne p {font-size: 18px; padding-bottom: 5px }
    .gridBox {display: block }
    .carouselBox {width: 100% }
	.section h2, .section.how-we-can-wrapper h2, .overviewSection h2 {font-size: 34px; margin-bottom: 15px }
	.sectionBoxOne {margin: 30px auto }
    .work-with-img-wrap {margin: 50px auto 0 }
  .work-with-img-wrap:before,.work-with-img-wrap:after {width: 0 }
  .work-with-img-wrap img {margin: 0 20px }

}
@media screen and (max-width: 600px) {
	.segment-banner-wrapper {height: 220px }
	.contactFromBox {max-width: 290px }
    .segment-banner-wrapper.ismobile{margin-top: 10px;}
    .work-with-img-wrap {height: 35px !important }
}
@media screen and (max-width: 480px) {
	.segment-banner-wrapper h1 {line-height: 26px }
    .btnclass {font-size: 15px }
    .section h2, .section.how-we-can-wrapper h2 {font-size: 28px; line-height: 28px; margin-bottom: 0 }
    .sectionBoxOne h2 {font-size: 28px; line-height: 28px }
    #description {height: 50px !important }

}