.trainingpage{padding: 3rem 0px;}
.serviceitem  {padding:0px; transition: all ease-in-out 0.4s;height: 100%; margin-top: 1.5rem;}
.serviceitem:hover {transform: translateY(-5px);}
.serviceimg {border-radius: 8px;overflow: hidden;}
.serviceimg img {transition: 0.6s;}
.details {background: #fff;padding: 20px 20px;margin: -30px 20px 0 20px;transition: all ease-in-out 0.3s;position: relative;text-align: center;border-radius: 8px;box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);}
.details h3 {font-weight: 700; margin: 0px 0 0px 0;font-size: 22px;transition: ease-in-out 0.3s;}
.details p {color: color-mix(in srgb, var(--default-color), transparent 10%);line-height: 24px;font-size: 14px;margin-bottom: 0;}
.serviceitem:hover .details h3 {color: var(--accent-color);}
.serviceitem:hover .serviceimg img {transform: scale(1.2);}
.trainingpage h2{font-size: 40px;padding-bottom: 10px;font-family: "Fjalla One", sans-serif;}
.trainingpage h5{font-size: 20px;padding-bottom: 10px;font-family: "Fjalla One", sans-serif;}
.trainingpage ul {padding: 10px 0 10px 0px;margin: 0px 0 1rem 20px;}

.trainingpage ul li {
    color: #414042;
    list-style-type: square;
    font-size: 16px;
}

.trainingpage ul li::marker{color: #da9100;}

.boxcontainer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: auto;
    position: relative;
    overflow: hidden;
}

.boxcolumn {
    background-color: #fff; 
    padding: 20px;
    flex: 0 0 calc(33.333% - 1rem);
    text-align: left;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Start of Mini Desktop screen */
@media screen and (max-width: 1200px) and (min-width: 1100px) {
.trainingpage {padding: 2rem 0px;}
.serviceitem {margin-top: 10px;}
.servicebanner-menu ul {display: flex;justify-content: flex-start;}
.servicebanner-menu ul li a {margin-left:0px;}
.boxcolumn {padding: 12px; }
}

/* Start of IPad Pro screen */
@media screen and (max-width: 1100px) and (min-width: 992px) {
.trainingpage {padding: 2rem 0px;}
.serviceitem {margin-top: 10px;}
.servicebanner-menu ul {display: flex;justify-content: flex-start;}
.servicebanner-menu ul li a {margin-left:0px;}
.boxcolumn {padding: 10px; }
}


/* Start of IPad screen */
@media screen and (max-width: 991.98px) and (min-width: 768px) {
.trainingpage {padding: 2rem 0px;}
.serviceitem {margin-top: 10px;}
.servicebanner-menu ul {display: flex;justify-content: flex-start;}
.servicebanner-menu ul li a {margin-left:0px;}
.boxcolumn {padding: 20px;flex: 0 0 calc(50% - 0.75rem);}
}

/* Start of mobile screen */
@media screen and (max-width: 767px) and (min-width: 320px) {
.trainingpage {padding: 1rem 0px;}
.serviceitem {margin-top: 10px;}
#clinicaboutdoctor-wrap-1 {flex-direction: column;}
.servicebanner-heading {display: block;text-align: center;padding-top: 1.2rem;}
.servicebanner-menu {width: 100%;background-color:unset;padding-left: 0;top:52px}
.servicebanner-menu ul {display: flex;justify-content: center;}
.servicebanner-menu ul li a {margin-left:0px;}
.servicebanner-heading { width: 100% !important;text-align: center; margin-bottom: 18px;padding-top: 0px;}
#clinicaboutdoctor-wrap-1 {flex-direction: unset;}
.boxcolumn {flex: 0 0 100%; padding: 12px;}
.boxcontainer {gap: 10px 0px;padding:0px;}
.trainingpage h2{font-size: 22px;}
.trainingpage ul {padding: 3px 0 3px 0px;margin: 0px 0 10px 20px;}
}
  