@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #000;
    font-weight: normal;
}

.cell-number p,
.cell-number a {
    color: white !important;
}

p b {
    font-weight: 600;
}

.topbar {
    background: #000;
    padding-top: 8px;
    padding-bottom: 8px;
}

.menu-login ul {
    padding-left: 0;
    margin-top: 21px;
    margin-bottom: 0;
    text-align: right;
    position: relative;
    z-index: 1;
}

.menu-login ul li {
    display: inline-block;
    list-style: none;
    text-transform: capitalize;
    border-right: 1px solid #727272;
    line-height: 14px;
    padding-right: 9px;
    padding-left: 6px;
}

.homebanner .menu-login ul li {
    border-right: 1px solid #fff;
}

.menu-login ul li:nth-last-child(1) {
    border-right: 0;
}

.homebanner .menu-login a {
    color: #fff;
}

.menu-login a {
    color: #3b3c3b;
    font-size: 16px;
    text-decoration: none;
}

.menu-login a:hover {
    color: #7da815;
}

.mainbanner {
    min-height: 365px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.homebanner {
    background: url('../webp/pdtraining-homebanner.webp') no-repeat;
    background-size: cover;
    background-position: top center;
}

.innerbanner {
    background: url('../webp/pdtraining-mainbanner.webp') no-repeat;
    background-size: cover;
    background-position: top center;
    min-height: 305px;
}

.mainbanner .logo figure {
    background: #fff;
    width: 110px;
    height: 110px;
    text-align: center;
    border-radius: 100px;
    position: relative;
    border: 5px solid rgba(50, 50, 49, 0.13);
    overflow: hidden;
    padding: 36px 15px 0 15px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.09);
}

.search input {
    border-radius: 100px !important;
    border: 2px solid #727272;
    background: #e9e9e9;
}

.search .input-group {
    margin-top: 14px;
    z-index: 1;
}

.search .form-control:focus {
    color: #495057;
    background-color: transparent;
    border-color: #727272;
    outline: 0;
    box-shadow: none;
    z-index: 0 !important;
}

.search .btn-secondary {
    color: #fff;
    background-color: #727272;
    border-color: #727272;
    border-radius: 100px !important;
    width: 39px;
    left: -29px;
}

.topphone {
    text-align: center;
}

.topphone a {
    color: #000;
    text-decoration: none;
    font-size: 16px;
}

.topmenu .bg-dark {
    background-color: transparent !important;
    float: right;
    margin-top: 0px;
}

.navbar-dark .navbar-toggler {
    border-color: transparent;
    background: transparent;
}

.navbar-dark .navbar-toggler {
    color: rgb(14, 144, 255);
    border-color: rgba(255, 255, 255, 0);
}

.homebanner .navbar-dark .navbar-nav .nav-link {
    color: #fff;
}

.navbar-toggler {
    padding: 0;
    font-size: 24px;
}

.navbar-dark .navbar-nav .nav-link {
    color: #323231;
    font-size: 16px;
    text-transform: capitalize;
}

.navbar-dark .navbar-nav .nav-item:nth-last-child(1) a {
    border-right: 0;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #7da815;
}

.navbar-dark .navbar-toggler {
    color: rgb(255, 255, 255);
    border-color: rgba(50, 50, 49, 0);
}

.navbar-brand figure {
    margin-bottom: 0;
}

.mainbanner h1 {
    font-size: 36px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.5;
    margin: 0 auto;
    margin-top: 3%;
    text-shadow: none;
}

.mainbanner h1 span {
    display: block;
}

.mainbanner h1 b {
    font-weight: 600;
}

.innerbanner h1 {
    color: #181818;
}

.innerbanner h6 {
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    margin-top: 10px;
}

.our-purpose {
    position: relative;
    top: -50px;
    background: #a2cd3a;
    padding: 20px 40px;
    border-radius: 4px;
    text-align: center;
}

.our-purpose p {
    font-size: 21px;
    color: #000;
    line-height: 1.5;
    margin-bottom: 7px;
    padding: 0;
}

.our-purpose p b {
    font-weight: 600;
}

.OurPurpose {
    background: #f8f8f8;
    padding-bottom: 50px;
}

.h1title {
    text-align: center;
    margin: 10px auto;
    font-size: 35px;
    position: relative;
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.h1title::after {
    position: absolute;
    bottom: 0;
    content: '';
    width: 70px;
    height: 2px;
    background: #ff5a00;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.OurPurposeBoxs {
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
}

.OurPurposeBoxs a {
    text-decoration: none;
    color: #000;
}

.OurPurposeBoxs a:hover {
    color: #7e9d11;
}

.PurposeFlex {
    display: flex;
}

.OurPurposeBox {
    background: #fff;
    border-radius: 20px 0;
    overflow: hidden;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}

.OurPurposeIcon {
    display: table;
    background: #ff5a00;
    width: 50px;
    height: 50px;
    position: relative;
    top: -25px;
    left: 10px;
    border-radius: 10px 0;
    text-align: center;
    padding-top: 9px;
    border: 2px solid #fff;
}

.OurPurposeImg figure img {
    width: 100%;
}

.OurPurposeBox figure {
    margin-bottom: 0;
}

.OurPurposeText {
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.OurPurposeText h3 {
    color: #000;
    font-weight: 600;
    position: relative;
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1.5;
}

.OurPurposeText h3 span {
    display: block;
    font-size: 14px;
}

.OurPurposeText h3::after {
    position: absolute;
    bottom: 0;
    content: '';
    width: 40px;
    height: 2px;
    background: #a4cf0b;
    left: 0;
}

.OurPurposeText ul {
    padding-left: 0px;
    margin-top: 8px;
}

.OurPurposeText ul li {
    color: #000;
    font-size: 15px;
    list-style: none;
    position: relative;
    padding-left: 20px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #e1e1e1;
    margin-bottom: 10px;
}

.OurPurposeText ul li:nth-last-child(1) {
    border-bottom: 0;
    margin-bottom: 5px;
}

.OurPurposeText ul li::before {
    position: absolute;
    left: 0;
    color: #aae41d;
    content: '\f35a ';
    font-family: 'Font Awesome\ 5 Free';
    font-style: normal;
    top: 0px;
    font-weight: 400;
}

.HowWeDeliver {
    padding-top: 50px;
    padding-bottom: 50px;
}

.ClientsSay {
    padding-bottom: 50px;
}

#ClientsSay .item p {
    font-size: 13px;
    line-height: 1.7;
    font-weight: 400;
    color: #111;
    text-align: center;
}

#ClientsSay .item h5 {
    font-size: 13px;
    color: #000;
    font-weight: 400;
    border-top: 1px solid #eee;
    padding-top: 8px;
    line-height: 1.5;
    text-align: center;
}

#ClientsSay .item h5 small {
    font-size: 12px;
    color: #ff3c00;
}

#ClientsSay .item {
    position: relative;
    margin-bottom: 55px;
    opacity: .2;
    -webkit-transform: scale3d(0.8, 0.8, 1);
    transform: scale3d(0.8, 0.8, 1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 15px 15px rgba(227, 227, 227, 0.1), 0 10px 10px rgba(0, 0, 0, 0.02);
}

#ClientsSay .owl-item {
    margin-top: 45px;
}

#ClientsSay .owl-item.active.center .item {
    opacity: 1;
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
}

#ClientsSay .owl-dots .owl-dot.active span,
#ClientsSay .owl-dots .owl-dot:hover span {
    background: #FF5A00;
    transform: translate3d(0px, -50%, 0px) scale(0.7);
}

#ClientsSay .owl-dots {
    display: inline-block !important;
    width: 100%;
    text-align: center;
}

#ClientsSay .owl-dots .owl-dot {
    display: inline-block;
}

#ClientsSay .owl-dots .owl-dot span {
    background: #FF5A00;
    display: inline-block;
    height: 20px;
    margin: 0 2px 5px;
    transform: translate3d(0px, -50%, 0px) scale(0.3);
    transform-origin: 50% 50% 0;
    transition: all 250ms ease-out 0s;
    width: 20px;
}

footer {
    background: #2c2c2c;
    padding-top: 30px;
    padding-bottom: 20px;
}

footer figure {
    background: #fff;
    width: 140px;
    height: 140px;
    text-align: center;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    padding: 45px 15px 0 15px;
    box-shadow: 0px 0px 0px 10px rgba(255, 255, 255, 0.04);
    margin: 0 auto;
}

.divider {
    margin: 20px auto 10px auto;
    text-align: center;
}

.footer-btns a {
    border: 2px solid #949494;
    font-size: 14px;
    color: #ededed;
    border-radius: 4px;
    display: block;
    text-decoration: none;
    padding: 10px 5px 10px 5px;
    text-align: center;
    font-weight: 400;
    margin: 10px 0;
}

.footer-btns a:hover {
    background: #a2cd3a;
    color: #000;
}

footer p {
    text-align: right;
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    margin-bottom: 5px;
}

footer h4 a {
    color: #a2cd3a;
    font-weight: 600;
    font-size: 35px;
}

footer h4 a:hover {
    color: #fff;
    text-decoration: none;
}

footer h4 {
    text-align: right;
    margin-top: 0;
}

footer h4 i {
    background: #a2cd3a;
    color: #2c2c2c;
    border-radius: 100px;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 30px;
    padding-top: 5px;
}

.GreySection {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #f8f8f8;
}

.GreenBarImgRH {
    position: relative;
    text-align: right;
    margin-bottom: 0;
}

.GreenBarImgRH::after {
    position: absolute;
    right: -20px;
    background: #a2cd3a;
    top: -20px;
    height: 109%;
    content: '';
    width: 50%;
    z-index: 0;
}

.GreenBarImgRH img {
    position: relative;
    z-index: 9;
    border: 1px solid #fff;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.11);
}

.VirtualTraining #ClientsSay {
    margin-top: 60px;
}

.FindOutBtn {
    border-radius: 100px;
    background: #ff3c00;
    text-transform: uppercase;
    font-size: 21px;
    color: #fff;
    margin: 15px auto;
    text-align: center;
    display: table;
    padding: 10px 21px;
    font-weight: 700;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.11);
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.FindOutBtn:hover {
    background: #e80000;
    color: #fff;
}

.FindOutBtn:active {
    top: 2px;
}

.VirtualWebinars {
    padding-top: 70px;
    padding-bottom: 40px;
}

.VirtualWebinars #ClientsSay {
    margin-top: 50px;
}

.h2title {
    margin: 0px auto;
    font-size: 35px;
    position: relative;
    color: #000;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border: none;
}

.h2title::after {
    position: absolute;
    bottom: 0;
    content: '';
    width: 70px;
    height: 2px;
    background: #ff5a00;
    left: 0;
}

.GreenBarImgLH {
    position: relative;
    text-align: left;
    margin-bottom: 0;
}

.GreenBarImgLH::after {
    position: absolute;
    left: -20px;
    background: #a2cd3a;
    top: -20px;
    height: 109%;
    content: '';
    width: 50%;
    z-index: 0;
}

.GreenBarImgLH img {
    position: relative;
    z-index: 9;
    border: 1px solid #fff;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.11);
}

.VirtualPlatformExperience {
    padding-top: 70px;
    padding-bottom: 70px;
    background: linear-gradient(90deg, #F8F8F8 80%, #fff 10%);
}

.hybrid-room {
    padding-top: 50px;
    padding-bottom: 50px;
}

.hybrid-room p {
    text-align: center;
}

.arrowlist {
    padding-left: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.arrowlist li {
    color: #000;
    font-size: 17px;
    list-style: none;
    position: relative;
    padding-left: 25px;
    padding-bottom: 8px;
    margin-bottom: 7px;
}

.arrowlist li::before {
    position: absolute;
    left: 0;
    color: #86a80f;
    content: '\f35a';
    font-size: 17px;
    font-family: 'Font Awesome\ 5 Free';
    font-style: normal;
    top: 0px;
    font-weight: 400;
}

.classroom_set_up {
    padding-top: 50px;
    padding-bottom: 50px;
}

.OurHybrid .btn {
    margin-top: 50px;
}

.MeetingActivityPacks {
    padding-top: 50px;
    padding-bottom: 50px;
}

.onecoaching .GreenBarImgRH::after,
.Coachestailored .GreenBarImgRH::after {
    height: 113%;
}

.MeetingActivityPacks .GreenBarImgLH::after {
    height: 112%;
}

.ActivityExample {
    background: #fff;
    padding: 40px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.04);
    margin-top: 20px;
    margin-bottom: 20px;
}

.ActivityExample .h2title {
    font-size: 30px;
}

.ActivityExample h4 {
    background: #a1cc3a;
    display: table;
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 18px;
    color: #fff;
    margin-top: 25px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14);
}

.ActivityExample hr {
    border-top: 1px solid rgb(248, 248, 248);
}

.ActivityExample figure img {
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.03);
}

.standalone {
    background: #fbfbfb;
    padding: 27px 55px 27px 55px;
    margin: 20px auto;
    position: relative;
}

.reinforce {
    background: #f6f6f6;
    padding: 27px 55px 27px 55px;
    margin: 20px auto;
    position: relative;
}

.make-stick figure {
    width: 80px;
    height: 80px;
    text-align: center;
    background: #fff;
    border-radius: 100px;
    border: 3px solid #ff5a00;
    padding-top: 15px;
    margin: 0;
}

.make-stick h4 {
    color: #131414;
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.5;
    margin-top: 15px;
    position: relative;
    text-align: left;
}

.make-stick h4 span {
    display: block;
}

.make-stick h4::after {
    position: absolute;
    background: #ff5a00;
    width: 50px;
    height: 2px;
    left: 0;
    bottom: -10px;
    content: '';
}

.reinforce b {
    position: absolute;
    left: -17px;
    border: 2px solid #000;
    padding: 7px;
    font-size: 16px;
    font-weight: normal;
    border-radius: 100px;
    background: #fff;
    top: 50%;
}

.GrowModelDiagram {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
}

.GrowModelDiagram figure {
    margin-bottom: 0px;
}

.GrowModelDiagram .btn {
    margin-top: 30px;
}

.learning {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

.learning .col-md {
    border-right: 1px solid #e1e1e1;
    margin-top: 20px;
    margin-bottom: 30px;
}

.learning .col-md:nth-last-child(1) {
    border-right: 0;
}

.learningbox p {
    text-align: center;
    font-size: 17px;
    color: #000000;
    line-height: 1.5;
    font-weight: 600;
}

.learningbox p span {
    display: block;
}

.ValueBonus {
    padding-top: 40px;
    padding-bottom: 30px;
}

.ValueBonusBox {
    background: #f8f8f8;
    border-radius: 5px;
    border: 1px solid #ededed;
    padding: 25px;
}

.ValueBonusBox h4 {
    display: table;
    border-radius: 100px;
    padding: 10px 20px;
    font-size: 22px;
    color: #000;
    margin-top: 25px;
    border: 2px solid #ededed;
}

.FollowingCategories {
    text-align: center;
    padding-bottom: 40px;
}

.FollowingCategoriesRow {
    width: 88%;
    margin: 0 auto;
}

.FollowingCategoriesBox {
    border: 1px solid #f2f2f2;
    text-align: center;
    padding: 10px 10px;
    min-height: 208px;
    margin: 15px auto;
}

.FollowingCategoriesRow .col-md-3:nth-child(even) .FollowingCategoriesBox {
    background: #fcfcfc;
}

.FollowingCategoriesRow a {
    text-decoration: none;
}

.FollowingCategoriesBox:hover {
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.03);
}

.FollowingCategoriesBox figure {
    width: 117px;
    height: 117px;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

.FollowingCategoriesBox figure img {
    border-radius: 100px;
    border: 6px solid #f3f3f3;
}

.FollowingCategoriesBox p {
    margin-bottom: 0;
    line-height: 1.3;
}

.yourworkplace {
    padding-bottom: 70px;
    padding-top: 30px;
}

.yourworkplace .GreenBarImgRH::after,
.yourworkplace .GreenBarImgLH::after,
.ProvidingPractical .GreenBarImgLH::after {
    height: 112%;
}

.ProvidingPractical {
    padding-top: 40px;
    padding-bottom: 30px;
}

.Terry {
    padding: 20px;
    background: #f8f8f8;
}

.ProvidingPractical .btn {
    margin-top: 50px;
}

.TeamCulture {
    padding-top: 70px;
}

.BespokeProjects {
    padding-top: 30px;
    padding-bottom: 50px;
}

.h3title {
    margin: 0px auto;
    font-size: 28px;
    position: relative;
    color: #000;
    text-transform: capitalize;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 30px;
    line-height: 1.5;
    background: none;
    box-shadow: none;
    margin-left: 0;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
}

.h3title::after {
    position: absolute;
    bottom: 0;
    content: '';
    width: 70px;
    height: 2px;
    background: #ff5a00;
    left: 0;
}

.bespoke-table {
    border: 1px solid #f4f4f4;
    margin-bottom: 50px;
    color: #000;
}

.bespoke-table:nth-last-child(1) {
    margin-bottom: 0;
}

.bespoke-table thead {
    background: #a2cd3a;
}

.bespoke-table thead th {
    padding: 10px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.bespoke-table th:nth-child(1) {
    width: 18%;
}

.table thead th {
    border-bottom: 0px;
}

.bespoke-table p {
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    margin-bottom: 5px;
}

.bespoke-table tbody tr:nth-child(2n) {
    background: #f7f9f8;
}

.bespoke-table tbody tr:nth-child(2n) th {
    background: #f7f9f8;
}

.bespoke-table tbody td {
    padding: 10px;
    border: 1px solid #f4f4f4;
}

.bespoke-table tbody tr:nth-child(2n+1) td {
    background: none;
}

.bespoke-table th {
    padding: 10px;
    border: 1px solid #f4f4f4;
    font-weight: 600;
    font-size: 15px;
}

.bespoke-table ul {
    padding-left: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.bespoke-table ul li {
    font-size: 15px;
    list-style: none;
    position: relative;
    padding-left: 25px;
    padding-bottom: 8px;
}

.bespoke-table ul li::before {
    position: absolute;
    left: 0;
    color: #ff3c00;
    content: '\f14a ';
    font-family: 'Font Awesome\ 5 Free';
    font-style: normal;
    top: 0px;
    font-weight: 400;
}

.InstructionalDesign {
    padding-top: 50px;
    padding-bottom: 20px;
}

.InstructionalDesign .GreenBarImgRH::after {
    height: 113%;
}

.DesignExperience {
    background: #f8f8f8;
    padding: 40px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.04);
    margin-top: 20px;
    margin-bottom: 20px;
}











.instructional-design {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #f8f8f8;
}

.instructional-design .row {
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
}

.instructional-design-box {
    background: #fff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    border-radius: 40px 0;
    overflow: hidden;
    min-height: 520px;
    margin-top: 25px;
    margin-bottom: 25px;
    transition: 0.3s ease all;
}

.instructional-design-box:hover {
    box-shadow: none;
    transition: 0.3s ease all;
}

.instructional-design-box a {
    color: #ff3c00;
    font-size: 17px;
    font-weight: 400;
}

.instructional-design-box a i {
    font-size: 15px;
    padding-left: 5px;
}

.instructional-design-box-text {
    padding: 25px;
}

.instructional-design-box h3 { 
    font-size: 28px;
    position: relative;
    color: #000;
    text-transform: capitalize;
    font-weight: 600;
    padding-bottom: 10px;
    margin-bottom: 30px;
    line-height: 1.5; 
    padding-top: 0; 
}

.instructional-design-box h3::after {
    position: absolute;
    bottom: 0;
    content: '';
    width: 70px;
    height: 2px;
    background: #ff5a00;
    left: 0;
}

.instructional-design-box p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #000;
    font-weight: normal;
}

.have-project {
    background: linear-gradient(-70deg,#ff3c00 30%,#f8f8f8 10%);
    border: 1px solid #ebebeb;
    padding: 25px;
    max-width: 940px;
    margin-bottom: 70px;
    margin-top: 70px;
}

.have-project p {
    font-size: 20px;
    line-height: 1.6;
    color: #000;
    margin-bottom: 0;
    font-weight: 400;
}

.have-project p span {
    display: block;
}

.have-project .btn {
    border-radius: 0;
    background: transparent;
    font-size: 21px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

.WhatisInstructionalDesign {
    padding-top: 70px;
    padding-bottom: 70px;
    background: #f8f8f8;
}







/* =============================================================================== */

/*  media start  */

/* =============================================================================== */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .menu-login a {
        font-size: 15px;
    }
    .navbar-dark .navbar-nav .nav-link {
        font-size: 15px;
    }
    .OurPurposeBoxs {
        width: 100%;
    }
    .OurPurposeText ul li {
        font-size: 14px;
    }
    .footer-btns .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .topbar .offset-md-6 {
        margin-left: 30%;
    }
    .topbar .col-md-3 {
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 35%;
    }
    .mainbanner .col-md-10 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .topmenu .offset-md-4 {
        margin-left: 23.333%;
    }
    .topmenu .col-md-3 {
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 35%;
    }
    .search input {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .search .btn-secondary {
        left: 0;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    .topmenu .bg-dark {
        margin-top: -29px;
        line-height: inherit;
        float: none;
    }
    .navbar-dark .navbar-nav .nav-link {
        border-right: 0;
    }
    .homebanner .navbar-dark .navbar-nav .nav-link {
        padding: .3rem 1rem;
    }
    .logo {
        display: none;
    }
    .navbar-brand {
        display: block;
    }
    .navbar-brand figure {
        background: #fff;
        width: 100px;
        height: 100px;
        text-align: center;
        border-radius: 100px;
        position: relative;
        border: 5px solid rgba(50, 50, 49, 0.13);
        overflow: hidden;
        padding: 29px 12px 0 12px;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.09);
        margin-bottom: 0;
    }
    .navbar-nav {
        text-align: right;
    }
    .innerbanner .navbar-dark .navbar-toggler {
        color: rgb(81, 81, 81);
    }
    .mainbanner h1 {
        font-size: 25px;
    }
    .mainbanner {
        min-height: auto;
        padding-bottom: 30px;
    }
    .our-purpose {
        top: 0;
        padding: 20px 20px;
        margin-bottom: 20px;
    }
    .our-purpose p {
        font-size: 17px;
    }
    .OurPurpose {
        padding-bottom: 30px;
        padding-top: 30px;
    }
    .h1title,
    .h2title {
        font-size: 25px;
    }
    .OurPurposeBoxs {
        width: 100%;
    }
    .OurPurposeBoxs .col-md-4 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .ClientsSay .item p {
        font-size: 12px;
        line-height: 1.6;
    }
    .ClientsSay .item h5 {
        font-size: 12px;
    }
    .footer-btns .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    p {
        font-size: 15px;
        margin-bottom: 10px;
    }
    .GreenBarImgRH::after {
        right: -10px;
        top: -10px;
        height: 80%;
    }
    .GreenBarImgLH::after {
        left: -10px;
        top: -10px;
        height: 80%;
    }
    .arrowlist li {
        font-size: 15px;
    }
    .standalone,
    .reinforce {
        padding: 17px 15px 17px 15px;
    }
    .make-stick h4 {
        font-size: 18px;
    }
    .learningbox p {
        font-size: 14px;
        line-height: 1.3;
    }
    .ActivityExample .h2title {
        font-size: 22px;
    }
    .FollowingCategoriesRow {
        width: 100%;
    }
    .FollowingCategoriesRow .col-md-3 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    .h3title {
        font-size: 25px;
    }
    .bespoke-table thead th {
        padding: 8px;
        font-size: 14px;
    }
    .bespoke-table th {
        padding: 8px;
        font-size: 14px;
    }
    .bespoke-table p {
        font-size: 14px;
    }
    .DesignExperience {
        padding: 25px;
        margin-top: 0;
        margin-bottom: 0;
    }
    .InstructionalDesign {
        padding-top: 30px;
        padding-bottom: 20px;
    }






.InstructionalDesign {
    padding-top: 30px;
    padding-bottom: 20px;
}

.have-project {
    margin-bottom: 30px;
    margin-top: 30px; 
    max-width: 740px;
}

.have-project p {
    font-size: 15px;
}

.have-project .btn {
    font-size: 18px;
}
}
 
@media only screen and (min-width: 0px) and (max-width: 767px) {
    .logo {
        display: none;
    }
    .menu-login ul {
        margin-top: 0;
        margin-bottom: 7px;
    }
    .menu-login a {
        font-size: 13px;
    }
    .search .input-group {
        margin-top: 0;
    }
    .search input {
        border-radius: 20px;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    .search .btn-secondary {
        border-radius: 20px;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        left: 0;
    }
    .navbar-dark .navbar-brand {
        color: #fff;
        width: 80px;
    }
    .topmenu .bg-dark {
        float: none;
        margin-top: 0;
        line-height: inherit;
    }
    .navbar-dark .navbar-nav .nav-link {
        font-size: 14px;
        border-right: 0;
        text-align: right;
        display: block;
        padding: .2rem 1rem;
    }
    .innerbanner .navbar-dark .navbar-toggler {
        color: rgb(81, 81, 81);
    }
    .mainbanner {
        min-height: auto;
        padding-bottom: 30px;
    }
    .mainbanner h1 {
        font-size: 20px;
    }
    .our-purpose {
        top: 0;
        padding: 10px;
        margin-bottom: 15px;
    }
    .OurPurpose {
        padding-bottom: 20px;
        padding-top: 20px;
    }
    .our-purpose p {
        font-size: 15px;
    }
    .h1title,
    .h2title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    .OurPurposeBoxs {
        width: 100%;
        margin-top: 20px;
    }
    .PurposeFlex {
        display: block;
    }
    .OurPurposeText h3 {
        font-size: 16px;
    }
    .OurPurposeText ul li {
        font-size: 13px;
        padding-left: 18px;
        padding-bottom: 7px;
        margin-bottom: 7px;
    }
    .HowWeDeliver {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .ClientsSay {
        padding-bottom: 20px;
    }
    .ClientsSay .item p {
        font-size: 12px;
    }
    .ClientsSay .item h5 {
        font-size: 12px;
    }
    footer p {
        text-align: center;
        margin-top: 20px;
    }
    footer h4 {
        text-align: center;
    }
    .innerbanner h6 {
        font-size: 18px;
        margin-top: 0;
    }
    .GreySection {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    p {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .GreenBarImgRH::after,
    .GreenBarImgLH::after {
        display: none;
    }
    .GreenBarImgLH,
    .GreenBarImgRH {
        text-align: center;
        margin-bottom: 10px;
    }
    .VirtualTraining #ClientsSay {
        margin-top: 10px;
    }
    #ClientsSay .owl-item.active.center .item {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    .FindOutBtn {
        font-size: 18px;
    }
    .VirtualWebinars {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .VirtualPlatformExperience {
        padding-top: 20px;
        padding-bottom: 20px;
        background: linear-gradient(90deg, #F8F8F8 100%, #fff 10%);
    }
    .hybrid-room,
    .classroom_set_up {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .arrowlist li {
        font-size: 14px;
    }
    .ActivityExample {
        padding: 10px;
        margin-top: 0;
        margin-bottom: 0;
    }
    .ActivityExample h4 {
        padding: 8px 17px;
        font-size: 16px;
        margin-top: 15px;
    }
    .MeetingActivityPacks {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .standalone,
    .reinforce {
        padding: 15px 15px 15px 15px;
        margin: 0px auto;
    }
    .reinforce b {
        left: unset;
        top: -10px;
        right: 10px;
        display: table;
        margin: 0 auto;
    }
    .make-stick h4 {
        font-size: 16px;
    }
    .GrowModelDiagram {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .learning .col-md {
        border-right: 0;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .ActivityExample .h2title {
        font-size: 17px;
    }
    .FollowingCategoriesBox {
        min-height: auto;
        margin: 5px auto;
    }
    .ProvidingPractical .btn {
        margin-top: 10px;
    }
    .h3title {
        font-size: 20px;
    }
    .bespoke-table thead th {
        padding: 5px;
        font-size: 14px;
        text-transform: capitalize;
    }
    .bespoke-table {
        margin-bottom: 20px;
    }
    .bespoke-table th {
        font-size: 13px;
    }
    .bespoke-table p {
        font-size: 13px;
        line-height: 23px;
    }
    .bespoke-table ul li {
        font-size: 13px;
        padding-left: 20px;
    }
    .BespokeProjects {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .InstructionalDesign {
        padding-top: 20px;
        padding-bottom: 10px;
    }
    .DesignExperience {
        padding: 15px;
        margin-top: 0;
        margin-bottom: 0;
    }






        


.instructional-design .row {
    max-width: 430px;
}

.instructional-design-box {
    min-height: unset;
}

.have-project {
    max-width: 540px;
    margin-top: 30px;
    background: #f8f8f8;
    margin-bottom: 30px;
}

.have-project p span {
    display: inline;
}

.have-project p {
    font-size: 18px;
    text-align: center;
}

.have-project .btn {
    background: #ff3c00;
    margin-top: 15px;
    padding: 8px 25px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: table;
}
}