.select2-selection--multiple .select2-selection__rendered.ssg-placeholder::before { content: attr(data-placeholder); color: #999; position: absolute; pointer-events: none; left: 8px; top: 5px; z-index: 1; } @media(max-width: 350px){.rating_bg{left: -10px}}@media(max-width: 400px){.profile-card{width: unset!important;}.center-anything{float: unset!important;}}@media(max-width: 1150px){.full-width-padding{padding-left: 15px!important; padding-right: 15px!important;}}@media(max-width: 767px){.profile-card{height: unset!important;}.ask-link-position{position: unset!important;}.feature-item{height: unset!important;}.subject-category-border{margin-left: 0px!important;}.margin-top-10{margin-top:40px!important;}.heading-lower-bordering{border-bottom:3px solid #9c3}.main-heading-page{font-size:18px!important;font-family:"Open Sans";color:#1269ba;font-weight:700;line-height:1.2222;padding-bottom:3px;margin-top:0;margin-bottom:0}.main-heading-page{font-size:18px!important;font-family:"Open Sans";color:#1269ba;font-weight:700;line-height:1.2222;padding-bottom:3px;margin-top:0;margin-bottom:0}.freelancer-background-heading{font-size: 18px!important;color:#1269ba!important; }} .select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:#fff;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:max-content;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #ddd;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#ebf3fc;border:1px solid transparent;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px;color:#414042;font-weight:700}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#a7a9ac;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #337ab7 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:0 0;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:#fff}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top,#fff 50%,#eee 100%);background-image:-o-linear-gradient(top,#fff 50%,#eee 100%);background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top,#eee 50%,#ccc 100%);background-image:-o-linear-gradient(top,#eee 50%,#ccc 100%);background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:0 0;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top,#fff 0,#eee 50%);background-image:-o-linear-gradient(top,#fff 0,#eee 50%);background-image:linear-gradient(to bottom,#fff 0,#eee 50%);background-repeat:repeat-x}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top,#eee 50%,#fff 100%);background-image:-o-linear-gradient(top,#eee 50%,#fff 100%);background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb;} /* High z-index for all Select2 dropdowns */ .select2-container--open { z-index: 100000 !important; } .select2-dropdown { z-index: 100000 !important; } /* Modern Pagination Styles */ .pagination { display: flex; justify-content: center; align-items: center; list-style: none; margin: 40px 0; padding: 0; gap: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Ensure Show More button matches left tutor card width */ .pagination .show-more-tutors { display: inline-block; width: 100%; max-width: 100%; } @media (min-width: 1025px) { /* Left card takes the remaining width (gap: 20px, video: 330px) */ .pagination { width: calc(100% - 350px) !important; } } .pagination li { display: inline-block; margin: 0; } .pagination a { display: flex; align-items: center; justify-content: center; min-width: 40px; text-decoration: none; } .pagination li.active a, .pagination a.number.current { background: #0066cc; border-color: #0066cc; color: #ffffff; font-weight: 600; } .pagination li.active a:hover, .pagination a.number.current:hover { background: #0052a3; border-color: #0052a3; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3); } .pagination li.disabled a { background: #f9fafb; border-color: #e5e7eb; color: #9ca3af; cursor: not-allowed; pointer-events: none; } .pagination .dots { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; color: #6b7280; font-size: 14px; font-weight: 500; } /* Navigation arrows */ .pagination a i { font-size: 12px; } /* Mobile responsiveness */ @media (max-width: 768px) { .pagination { gap: 4px; margin: 30px 0; } .pagination .dots { min-width: 36px; height: 36px; font-size: 13px; } } @media (max-width: 480px) { .pagination { gap: 2px; flex-wrap: wrap; justify-content: center; } .pagination .dots { min-width: 32px; height: 32px; font-size: 12px; } } /* Legacy pagination support */ .pagination.green { background: transparent; padding: 0; } .pagination .dots { bottom: 0; position: static; }.pagination.blue,.pagination.blue a{color:#4fa3e0}.pagination.blue a.number.current{background-color:#4fa3e0;border-color:#4b9ec9 #2e7fb4 #206fa8;text-shadow:0 1px 1px #206fa8;background:-moz-linear-gradient(top,#b5dfef,#7fc3df 5%,#4fa3e0);background:-webkit-gradient(linear,left top,left bottom,from(#b5dfef),color-stop(.05,#7fc3df),to(#4fa3e0));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#7fc3df',EndColorStr='#4fa3e0')}.pagination.blue a.number.current:hover{border-color:#4092c0 #1f68a1 #175e97;background-color:#3f91c0;background:-moz-linear-gradient(top,#aad9ec,#72bad9 5%,#3f91c0);background:-webkit-gradient(linear,left top,left bottom,from(#aad9ec),color-stop(.05,#72bad9),to(#3f91c0));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#72bad9',EndColorStr='#3f91c0')}.pagination.blue a.number.current:active{border-color:#206fa8 #2e7fb4 #4b9ec9;text-shadow:0 -1px 1px #1f68a1;background:-moz-linear-gradient(top,#3f91c0,#72bad9);background:-webkit-gradient(linear,left top,left bottom,from(#3f91c0),to(#72bad9));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#3f91c0',EndColorStr='#aad9ec')}.pagination.orange,.pagination.orange a{color:#e87110}.pagination.orange a.number.current{background-color:#e87110;border-color:#f1820c #e35908 #df5107;text-shadow:0 1px 1px #de2c05;background:-moz-linear-gradient(top,#fad02d,#f6a81f 5%,#e87110);background:-webkit-gradient(linear,left top,left bottom,from(#fad02d),color-stop(.05,#f6a81f),to(#e87110));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f6a81f',EndColorStr='#e87110')}.pagination.orange a.number.current:hover{background-color:#e5680e;border-color:#ee750a #de4e06 #d94606;background:-moz-linear-gradient(top,#f8bb22,#f49d1a 5%,#e5680e);background:-webkit-gradient(linear,left top,left bottom,from(#f8bb22),color-stop(.05,#f49d1a),to(#e5680e));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f49d1a',EndColorStr='#e5680e')}.pagination.orange a.number.current:active{border-color:#df5107 #e35908 #f1820c;text-shadow:0 -1px 1px #de4e06;background:-moz-linear-gradient(top,#e5680e,#f49d1a);background:-webkit-gradient(linear,left top,left bottom,from(#e5680e),to(#f49d1a));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#de770b',EndColorStr='#f0a71d')}.pagination.green,.pagination.green a{color:#72c113}.pagination.green a.number.current{background-color:#72c113;border-color:#80c501 #4eaa02 #3e9e02;text-shadow:0 1px 1px #3e9e02;background:-moz-linear-gradient(top,#d6ee17,#b3df10 5%,#72c113);background:-webkit-gradient(linear,left top,left bottom,from(#d6ee17),color-stop(.05,#b3df10),to(#72c113));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#b3df10',EndColorStr='#72c113')}.pagination.green a.number.current:hover{background-color:#65b80f;border-color:#73bc01 #419d02 #359202;background:-moz-linear-gradient(top,#cfeb13,#a8d90d 5%,#65b80f);background:-webkit-gradient(linear,left top,left bottom,from(#cfeb13),color-stop(.05,#a8d90d),to(#65b80f));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#a8d90d',EndColorStr='#65b80f')}.pagination.green a.number.current:active{border-color:#359202 #419d02 #73bc01;text-shadow:0 -1px 1px #419d02;background:-moz-linear-gradient(top,#65b80f,#a8d90d);background:-webkit-gradient(linear,left top,left bottom,from(#65b80f),to(#a8d90d));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#65b80f',EndColorStr='#cfeb13')}.pagination.red,.pagination.red a{color:#c32a2a}.pagination.red a.number.current{background-color:#c32a2a;border-color:#c80d08 #b20b09 #a20a0a;text-shadow:0 1px 1px #a50b0a;background:-moz-linear-gradient(top,#f1614e,#e13a2d 5%,#c32a2a);background:-webkit-gradient(linear,left top,left bottom,from(#f1614e),color-stop(.05,#e13a2d),to(#c32a2a));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#e13a2d',EndColorStr='#c32a2a')}.pagination.red a.number.current:hover{background-color:#c31f1f;border-color:#bf0b06 #a00907 #960808;background:-moz-linear-gradient(top,#f75e4d,#ed4037 5%,#c31f1f);background:-webkit-gradient(linear,left top,left bottom,from(#f75e4d),color-stop(.05,#ed4037),to(#c31f1f));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ed4037',EndColorStr='#c31f1f')}.pagination.red a.number.current:active{border-color:#960808 #a00907 #bf0b06;text-shadow:0 -1px 1px #a00907;background:-moz-linear-gradient(top,#c31f1f,#ed4037);background:-webkit-gradient(linear,left top,left bottom,from(#c31f1f),to(#ed4037));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#c31f1f',EndColorStr='#ed4037')}.pagination.purple,.pagination.purple a{color:#a13bd0}.pagination.purple a.number.current{background-color:#a13bd0;border-color:#9e11dc #7c12bc #7413b4;text-shadow:0 1px 1px #710ebb;background:-moz-linear-gradient(top,#e15ef5,#c841ec 5%,#a13bd0);background:-webkit-gradient(linear,left top,left bottom,from(#e15ef5),color-stop(.05,#c841ec),to(#a13bd0));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#c841ec',EndColorStr='#a13bd0')}.pagination.purple a.number.current:hover{background-color:#9532c8;border-color:#920ed6 #730fb7 #670fa9;background:-moz-linear-gradient(top,#dc52f3,#bf37e8 5%,#9532c8);background:-webkit-gradient(linear,left top,left bottom,from(#dc52f3),color-stop(.05,#bf37e8),to(#9532c8));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#bf37e8',EndColorStr='#9532c8')}.pagination.purple a.number.current:active{border-color:#670fa9 #730fb7 #920ed6;text-shadow:0 -1px 1px #730fb7;background:-moz-linear-gradient(top,#9532c8,#bf37e8);background:-webkit-gradient(linear,left top,left bottom,from(#9532c8),to(#bf37e8));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ee36a8',EndColorStr='#fb63bc')}.pagination.pink,.pagination.pink a{color:#f13fb3}.pagination.pink a.number.current{background-color:#f13fb3;border-color:#f93398 #ed1d91 #e41188;text-shadow:0 1px 1px #ec1284;background:-moz-linear-gradient(top,#fda4df,#fc70c5 5%,#f13fb3);background:-webkit-gradient(linear,left top,left bottom,from(#fda4df),color-stop(.05,#fc70c5),to(#f13fb3));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#fc70c5',EndColorStr='#f13fb3')}.pagination.pink a.number.current:hover{background-color:#ee36a8;border-color:#f82b8c #e71682 #e4117f;background:-moz-linear-gradient(top,#fd98d9,#fb63bc 5%,#ee36a8);background:-webkit-gradient(linear,left top,left bottom,from(#fd98d9),color-stop(.05,#fb63bc),to(#ee36a8));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#fb63bc',EndColorStr='#ee36a8')}.pagination.pink a.number.current:active{border-color:#e4117f #e71682 #f82b8c;text-shadow:0 -1px 1px #e71682;background:-moz-linear-gradient(top,#ee36a8,#fb63bc);background:-webkit-gradient(linear,left top,left bottom,from(#ee36a8),to(#fb63bc));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#ee36a8',EndColorStr='#fb63bc')}.pagination.white,.pagination.white a{color:#606060}.pagination.white a.number.current{background-color:#e0e0e0;border-color:#ddd #d8d8d8 #c4c4c4;color:#606060;text-shadow:0 1px 0 #fff;background:-moz-linear-gradient(top,#fff,#f4f4f4 50%,#e0e0e0);background:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.5,#f4f4f4),to(#e0e0e0));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f4f4f4',EndColorStr='#e0e0e0')}.pagination.white a.number.current:hover{background-color:#ebebeb;border-color:#dbdbdb #d4d4d4 silver;background:-moz-linear-gradient(top,#fff,#f8f8f8 65%,#ebebeb);background:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(.65,#f8f8f8),to(#ebebeb));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f8f8f8',EndColorStr='#ebebeb')}.pagination.white a.number.current:active{border-color:silver #d4d4d4 #dbdbdb;text-shadow:0 -1px 0 #fff;background:-moz-linear-gradient(top,#ebebeb,#f4f4f4 50%,#fff);background:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),color-stop(.5,#f4f4f4),to(#fff));filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#f4f4f4',EndColorStr='#ffffff');} .btn-circle{border-radius:24px!important;overflow:hidden}.ladda-button,.ladda-button .ladda-label,.ladda-button .ladda-spinner{-webkit-transition:.3s cubic-bezier(.175,.885,.32,1.275) all!important;-moz-transition:.3s cubic-bezier(.175,.885,.32,1.275) all!important;-ms-transition:.3s cubic-bezier(.175,.885,.32,1.275) all!important;-o-transition:.3s cubic-bezier(.175,.885,.32,1.275) all!important;transition:.3s cubic-bezier(.175,.885,.32,1.275) all!important}.btn-outlined,.btn-ui{position:relative;margin-right:5px;vertical-align:middle;cursor:pointer;white-space:nowrap;padding:11px 42px;line-height:1.5;-webkit-transition:background-color .3s;display:inline-block;text-align:center}.ladda-button{position:relative}.btn-ui{font-size:15px!important;font-weight:400;border:2px solid transparent;text-transform:uppercase;border-radius:24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:background-color .3s}.btn-view-solution{background-color:#9ac427;border:1px solid #9ac427;font-size:18px;color:#fff}.btn-view-solution:hover{background-color:transparent;border:1px solid #9ac427;font-size:18px;color:#444}.btn-danger,.btn-default,.btn-info,.btn-primary,.btn-success,.btn-warning{border-color:transparent}.btn-success{color:#fff;background-color:#44c456}.btn-info{color:#fff;background-color:#626d83}.btn-default{color:#fff;background-color:#4c4c4c}.btn-warning{color:#fff;background-color:#c2c444}.btn-danger{color:#fff;background-color:#db6e79}.btn-primary{color:#fff;background-color:#abbdd1}.btn-outlined{border:2px solid transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:background-color .3s}.social-btn{display:inline-block;width:54px;height:54px;color:#fff;line-height:54px;text-align:center;text-decoration:none;border-radius:50%;margin:8px 4px;-webkit-transition:background-color .3s;transition:background-color .3s}.label-success{background-color:#44c456}.label-default{background-color:#4c4c4c}.label-primary{background-color:#abbdd1}.label-info{background-color:#626d83}.label-warning{background-color:#c2c444}.label-danger{background-color:#db6e79}.icon-left{padding-left:20px!important;padding-right:50px!important}.breadcrumb{font-size:12px;padding:6px 3px;margin-bottom:24px;list-style:none;background-color:rgba(255,255,255,.15);border-radius:12px}.breadcrumb,.image-text-positioning{display:inline-block}.breadcrumb-individual{font-size:14px;padding:6px 3px;margin-bottom:24px;list-style:none;color:#000;font-weight:500;background-color:rgba(255,255,255,.15);border-radius:12px;} .justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}.feature-area{padding:0px;margin-top:3px;margin-bottom:50px;}.section-title{padding-bottom:20px}.section-title h1{margin-bottom:20px;font-size:30px;color:#000;font-weight:bold!important}.feature-item{padding:35px 40px;background:#f1f9ff;margin-bottom:30px;-webkit-transition:all 0.3s ease 0s;-moz-transition:all 0.3s ease 0s;-o-transition:all 0.3s ease 0s;transition:all 0.3s ease 0s;height:100%;border:1px solid #ccc;border-radius:4px}.feature-item h4{margin-top:30px;font-size:20px;font-weight:600;margin-bottom:20px}.feature-item .content-center{height:128px}ul{margin:0;padding:0;list-style:none}:root{--star-size:24px;--star-color:#fff;--star-background:#fc0}.full-width-padding{padding-left:100px;padding-right:100px}.tutor-detail-section{display:flex;flex-direction:column}ul{list-style:none}img{-ms-interpolation-mode:bicubic;vertical-align:middle;border:0}.profile-card{width:310px;border-radius:4px;overflow:hidden;border:2px solid #e2e2e2;transition:transform .2s;position:relative;margin:auto;background:rgba(255,255,255,1);top:50%;height:415px}.profile-card:hover{transform:scale(1.1)}.profile-card-div{display:block;position:relative;background:rgba(255,255,255,1);text-align:center;padding:30px 0 6px;z-index:1;overflow:hidden;min-height:208px}.profile-card-div:before{content:"";position:absolute;background-size:cover;width:100%;height:100%;left:0;top:0;z-index:-1}.profile-card-div:after{content:"";position:absolute;bottom:-1px;left:0;width:100%;height:100%;z-index:-1;background-image:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%)}.profile-card-div img{overflow:hidden; width: 308px;height: 250px;border:0;margin-top:-22%;margin-bottom:-22%}.content-center{display:flex;justify-content:center}.margin-bottom-20{margin-bottom:20px}.how-work-banner{width:33.3333333%!important}.column-display{display:flex;flex-direction:column}.subject-category-two{font-size:30px;font-weight:300;color:#000;border-left:3px solid #1269BA;padding-left:15px;text-decoration:none!important}.container-fluid{padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}.row{margin-right:0;margin-left:0}.tutor-by-subject-margin{margin-top:25px!important;margin-bottom:25px}.padding-left-95{padding-left:70px}.subject-category-two{font-size:30px;font-weight:700;color:#000;border-left:3px solid #1269BA;padding-left:15px;text-decoration:none!important}.subject-category-border{margin-left:30px;border-left:3px solid #EFEFEF;margin-top:10px;margin-bottom:10px}.subject-category-border:first-child{margin-left:0;border-left:3px solid #EFEFEF;margin-top:10px;margin-bottom:10px}.subject-category-border:nth-child(5n+1){margin-left:0;border-left:3px solid #EFEFEF;margin-top:10px;margin-bottom:10px;clear:both}.subject-name{font-size:14px;color:#414042;font-weight:300}.no-margin{margin-left:0px!important;margin-right:0px!important}.inline-display{display:flex}.margin-top-10{margin-top:10px}.margin-top-5{margin-top:5px}.margin-top-60{margin-top:60px}.padding-top-11{padding-top:8px}.checkbox-center{display:flex!important;align-items:center}.filter-padding{padding-left:70px;padding-right:70px}.center-anything{display:table;margin:0 auto;}ol{display:block!important}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v36/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2')}.keyword-field{margin-left:0;height:32px;border:1px solid #DDD;box-shadow:0 0 0 0 transparent}.tag-skills{margin-top:5px;margin-bottom:5px}.select2-container{width:100%!important}.marg-bottom-5{margin-bottom:5px!important}.header-container{width:100%;min-height:462px;max-height:462px;background-position:center center;background-repeat:no-repeat;background-size:cover}.freelancer-background-heading{font-family:"Open Sans";color:rgb(255,255,255);font-weight:700;line-height:1;text-align:left}.freelancer-background-subheading{font-size:16px;font-family:"Open Sans";color:rgb(255,255,255);line-height:1.667;text-align:left;padding-right:40px;border-radius:12px;background-color:rgba(18,105,186,.7);clear:both;padding:15px}.width-70{width:50%!important}.width-30{width:50%!important}.connect-tutor-text-styling{font-size:18px;color:rgb(255,255,255);line-height:1;text-align:center;clear:both}.yellow-surface{background-color:rgba(255,188,0,.8);padding:15px;border-radius:12px;max-width:375px;margin-top:290px}.scrape-paper-position{position:relative;top:-35px}.find-tutor-button{font-size:20px;color:#1269ba;text-transform:uppercase;line-height:.833;text-align:center;border-radius:24px;background-color:#FFF;padding:12px 50px;border:0 solid transparent;outline:0}.tutor-status-label-rtt{background-color:green}.tutor-status-label{background-color:green}.find-tutor-button-position{margin-top:15px}.margin-left-section-background{margin-top:115px}.font-awesome-check{font-size:16px;color:rgb(154,196,39);line-height:1.2;margin-right:4px}.searched-result-heading{font-size:15px;color:rgb(0,0,0);line-height:1.2;margin-bottom:10px}.tutor-detail-section{margin-bottom:45px;background-color:rgba(154,196,40,0)}.biodesc{font-size:12px;color:rgb(88,89,91);padding-top:10px;border-top:3px solid #e5e5e5;line-height:1.3;text-align:left;overflow:hidden;height:60px;text-transform: lowercase}.university-degree{font-size:13px;color:#333;line-height:1.5;font-weight:500;height: 20px;display: inline-block;text-overflow: ellipsis;overflow: hidden}.tutor-name-styling{font-size:16px;color:#333;line-height:1.667;font-weight:700;text-overflow: ellipsis;overflow: hidden;height: 25px;display: inline-block}.rating-counter{font-size:13px;color:#333;line-height:1.5;font-weight:700}.padding-bottom-5{padding-bottom:5px!important}.freelancer-filter-rectangle{border-style:solid;border-width:1px;border-color:rgb(221,221,221);border-radius:4px;background-color:rgba(245,245,245,0)}.freelancer-filter-green-heading{font-size:16px;color:#1269ba;font-weight:700;line-height:1.2;text-align:left;display:flex;justify-content:flex-end;text-transform:uppercase;padding-bottom:7px;padding-right:15px;padding-left:15px}.toggle-icon{color:#1269ba;cursor:pointer}.status-text{font-size:14px;color:rgb(0,0,0);font-weight:700;line-height:1.2;text-align:left}.keywords-text{font-size:14px;color:rgb(0,0,0);font-weight:700;line-height:1.2;text-align:left;margin-bottom:5px}.additional-text{font-size:14px;color:rgb(0,0,0);font-weight:700;line-height:1.2;text-align:left;margin-bottom:5px}.country{font-size:14px;color:rgb(0,0,0);font-weight:700;line-height:1.2;text-align:left;margin-bottom:5px}.accept-terms{font-size:12px;color:#000;font-weight:700;line-height:1.167;padding-left:5px;padding-right:10px}.filter-padder-styling{padding-top:10px;padding-bottom:8px}.filter-spacing{padding-top:7px}.tutor-status-label{padding-top:3px;font-size:11px;font-family:arial;width:20%;position:absolute;z-index:2;right:auto;left:0;top:0}.tutor-status-label-rtt{padding-top:3px;font-size:11px;font-family:arial;width:30%;position:absolute;z-index:2;right:auto;left:0;top:0}.tutor-status-label-offline{width:30%;padding-top:5px;font-size:11px;font-family:arial;background-color:#a7a7a7;position:absolute;right:auto;left:0;top:0;z-index:11}.cursor-pointer{cursor:pointer}.background-padding{padding-left:170px;padding-right:170px}.ask-link-position{display:flex;justify-content:center;align-items:center;width:100%;position:absolute;bottom:0;padding-top:5px;padding-bottom:5px}.no-reviews{color:#333;font-style:italic;font-size:12px;float:right}.flag-image{width:15px!important;border:0px!important;margin-right:5px}.pagination-padding{padding-left:37px;padding-right:37px}@media only screen and (max-width:1680px){.tutor-detail-section{width:33.33333%!important}.tutor-status-label-offline{width:30%;padding-top:5px;font-size:11px;font-family:arial;background-color:#a7a7a7;position:absolute;z-index:2;right:auto;left:0;top:0}.tutor-status-label{padding-top:3px;font-size:11px;font-family:arial;width:20%;position:absolute;z-index:2;right:auto;left:0;top:0}.pagination-padding{padding-left:13px;padding-right:13px;z-index:1}.filter-padding{padding-left:70px;padding-right:70px}}@media only screen and (max-width:1300px){.tutor-detail-section{width:50%!important}.tutor-status-label-offline{width:30%;padding-top:5px;font-size:11px;font-family:arial;background-color:#a7a7a7;position:absolute;z-index:2;right:auto;left:0;top:0}.tutor-status-label{padding-top:3px;font-size:11px;font-family:arial;width:20%;position:absolute;z-index:2;right:auto;left:0;top:0}}.breadcrumb-margin-top{margin-top:10px!important;}@media only screen and (max-width:820px){.tutor-detail-section{width:100%!important}.breadcrumb-margin-top{margin-top:60px}.tutor-status-label-offline{width:30%;padding-top:5px;font-size:11px;font-family:arial;background-color:#a7a7a7;position:absolute;z-index:2;right:auto;left:0;top:0}.tutor-status-label{padding-top:3px;font-size:11px;font-family:arial;width:20%;position:absolute;z-index:2;right:auto;left:0;top:0}.full-width-padding{padding-left:0;padding-right:0}.profile-card{width:310px;border-radius:4px;overflow:hidden;border:2px solid #e2e2e2;position:relative;transition:transform .2s;margin:auto;background:rgba(255,255,255,1);top:50%;height:420px}.how-work-banner{width:100%!important}.subject-category-two{font-size:35px;margin-left:0px!important;font-weight:700;color:#58595B;border-left:3px solid #1269BA;padding-left:15px;text-decoration:none!important}.subject-category-border:nth-child(5n+1){margin-left:0px!important;border-left:3px solid #EFEFEF;margin-top:10px;margin-bottom:10px;clear:both}.filter-padding{padding-left:10px;padding-right:10px}.direction-column{flex-direction:column}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #DDD!important;border-radius:4px}.description-padding{padding-left:15px!important;padding-right:15px!important}}span.step{background:#118ca0;border-radius:.8em;-moz-border-radius:.8em;-webkit-border-radius:.8em;color:#fff;display:inline-block;font-weight:700;line-height:1.6em;margin-right:5px;text-align:center;width:1.6em;font-size:26px}.margin-bottom-30{margin-bottom:30px}.description-padding{padding-left:70px;padding-right:70px}.chip{display:inline-block;height:auto;font-size:13px;font-weight:500;color:rgba(0,0,0,.6);line-height:24px;padding:4px 8px;border-radius:4px;background-color:#e4e4e4;margin-bottom:5px;margin-right:5px}.chip .close{cursor:pointer;float:right;font-size:12px;line-height:28px;padding-left:5px}.material-icons{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}.text-wrap{word-break:break-all}.no_result_found{color:#bcbec0;font-size:16px;clear:both;margin-bottom:40px}.not-found-text-styling-position{padding-top:30px;padding-left:15px}.degree-icon{color:#1269ba}.breadcrumb{margin-bottom:10px!important}.padding-top-8{padding-top:8px}.border-bottom{border-bottom:1px solid #ccc}.select2-selection__rendered .select2-selection__clear{font-size:23px;color:#adadad}.select2-selection__rendered .select2-selection__clear{margin-right:10px}.margin-right-10{margin-right:10px}.counted{font-size:16px;color:#1269ba;font-weight:600}.message-button{font-size:16px;font-weight:600;color:#1269ba;padding:8px 15px;border:0;background-color:#fff}.message-button-rtt{background-color:#44c456;color:#fff;padding:8px 15px;border-radius:24px}.message-button:hover{color:#1269ba;text-decoration:none}.message-button:focus{color:#1269BA;text-decoration:none}.message-button-rtt:hover{color:#fff;text-decoration:none}.message-button-rtt:focus{color:#fff;text-decoration:none}.feature-inner{align-items:stretch;padding-left:70px;padding-right:70px}@media only screen and (max-width:1600px){.filter-padding{padding-left:50px;padding-right:50px}.feature-inner{padding-left:50px;padding-right:50px}.description-padding{padding-left:50px;padding-right:50px}.background-padding{padding-left:150px;padding-right:150px}.padding-left-95{padding-left:50px}}@media only screen and (max-width:1440px){.filter-padding{padding-left:30px;padding-right:30px}.description-padding{padding-left:30px;padding-right:30px}.background-padding{padding-left:130px;padding-right:130px}.feature-inner{padding-left:30px;padding-right:30px}.padding-left-95{padding-left:30px}}@media only screen and (max-width:1368px){.filter-padding{padding-left:0;padding-right:0}.description-padding{padding-left:0;padding-right:0}.background-padding{padding-left:100px;padding-right:100px}.feature-inner{padding-left:0;padding-right:0}.padding-left-95{padding-left:0}}.sub-head{margin-top:30px;font-size:20px;font-weight:600;margin-bottom:20px}.margin-right-5{margin-right:5px}.tutor-job-done-right{display:flex;justify-content:flex-end;} #online{margin:0px;}.white-background-footer-border {margin-top: 70px;}.description-padding p {font-size: 16px; line-height: 25px;} #min-price::-webkit-slider-thumb, #max-price::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #0066cc; cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); pointer-events: all; position: relative; z-index: 4; } #min-price::-moz-range-thumb, #max-price::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #0066cc; cursor: pointer; border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.2); pointer-events: all; position: relative; z-index: 4; } #min-price { z-index: 3; } #max-price { z-index: 3; } .tutor-card { display: flex; background: #fff; border: 1px solid #e5e7eb; overflow: hidden; transition: all 0.3s ease; margin-bottom: 20px; position: relative; } .tutor-img-section { position: relative; flex-shrink: 0; display: flex; flex-direction: column; box-sizing: border-box; z-index: 1; overflow: visible; /* Allow tooltip to show */ } .tutor-img-container { position: relative; width: 170px; height: 160px; border-radius: 12px; overflow: visible; /* Changed to visible to allow tooltip to show */ flex-shrink: 0; } .tutor-img-container img, .tutor-img-container a { border-radius: 12px; overflow: hidden; } .tutor-profile-img { width: 170px !important; height: 160px !important; object-fit: cover; display: block; } /* Status indicator square in bottom right corner - green when online, gray when offline */ .tutor-img-container { position: relative; } .tutor-online-badge { position: absolute; bottom: 5px; right: 5px; width: 20px; height: 20px; background: #10b981; /* Default green when online */ border: 2px solid white; border-radius: 4px; z-index: 10; transition: background-color 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); cursor: pointer; /* Remove text styles from old badge */ color: transparent; padding: 0; text-indent: -9999px; overflow: visible !important; /* Ensure tooltip is visible */ line-height: 1; font-size: 0; } /* Custom beautiful tooltip for online status indicator */ .tutor-online-badge::before { content: attr(data-online-status); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #1f2937 0%, #374151 100%); color: white; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 9999; text-transform: capitalize; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2); text-indent: 0; letter-spacing: 0.3px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .tutor-online-badge:hover::before { opacity: 1; visibility: visible; bottom: calc(100% + 12px); } /* Beautiful tooltip arrow */ .tutor-online-badge::after { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #1f2937; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 9998; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } .tutor-online-badge:hover::after { opacity: 1; visibility: visible; bottom: calc(100% + 4px); } .tutor-action-btn { width: 100%; padding: 12px 12px; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; } .tutor-live-btn { background: #1269ba; color: #fff; } .tutor-live-btn:hover { background: #3b82f6 !important; } .tutor-ask-btn { background: #fff; color: #1269ba; border: 1px solid #1269ba !important; } .tutor-ask-btn:hover { background:lightslategray; color: #fff; border: 1px solid lightslategray !important; } .tutor-main-content { display: flex; gap: 10px; align-items: flex-start; width: 100%; } .tutor-left-content { flex: 0 0 180px; /* Fixed width for image section */ display: flex; flex-direction: column; align-items: center; position: relative; } .tutor-middle-content { flex: 1; /* Takes remaining space */ display: flex; flex-direction: column; min-width: 0; /* Allows content to shrink */ } .tutor-right-content { flex: 0 0 210px; /* Fixed width for stats/buttons */ display: flex; flex-direction: column; align-items: flex-end; height: 100%; width: 100%; margin-left: 5px; } .tutor-price-heart-container { display: flex; align-items: start; justify-content: space-between; width: 100%; gap: 12px; margin-bottom: 16px; min-height: 48px; } .tutor-name-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 6px; } .tutor-name { margin-top: 0px; margin-bottom: 6px; font-size: 23px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .tutor-name a { color: #111827; text-decoration: none; } .tutor-name a:hover { color: #1269ba; } .verified-icon { color: #3b82f6; font-size: 16px; } .favorite-heart-btn { margin-top:-5px; background: none; border: none; cursor: pointer; font-size: 20px; transition: transform 0.2s ease; } .favorite-heart-btn:hover { transform: scale(1.1); } .tutor-stats-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: 11px; width: 100%; } .tutor-stat { font-size: 13px; color: #374151; } .stat-value { font-size: 22px; font-weight: 700; color: #111827; line-height: 1; } .stat-label { font-size: 13px; color: #6b7280; margin-top: 2px; } .desktop-desc { display: block; } .mobile-desc { display: none; } @media (max-width: 768px) { .desktop-desc { display: none; } .mobile-desc { display: block; } } .learn-more-link { color: #1269ba; text-decoration: none; font-weight: 600; } .learn-more-link:hover { text-decoration: underline; } .price-amount { font-size: 28px; font-weight: 700; color: #111827; line-height: 1; } .price-label { font-size: 15px; color: #6b7280; margin-top: 2px; } @media (min-width: 200px) and (max-width: 320px) { .profile-card-div img { width: 100%; } .tutor-status-label { width: 27%; } } header, #navBar, .navbar, .navbar-fixed-top { position: relative !important; background-color: transparent !important; background: transparent !important; margin-bottom: 0 !important; } .navbar .nav > li > a, .navbar-brand, .navbar .navbar-nav > li > a { color: #000000 !important; } .navbar .nav > li > a:hover, .navbar .navbar-nav > li > a:hover { color: #333333 !important; } body { padding-top: 0 !important; } .tutor-card-wrapper { padding: 0px !important; position: relative; } .tutor-card-inner { width: 100%; } /* Clickable card link wrapper */ .tutor-card-link { display: block; text-decoration: none !important; color: inherit; position: relative; z-index: 1; } .tutor-card-link:hover, .tutor-card-link:focus { text-decoration: none !important; } .tutor-card { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border-radius: 12px; overflow: hidden; transition: all 0.15s ease; border: 2px solid #dcdce5; display: flex; flex-direction: row; position: relative; padding: 30px 20px; } .tutor-card-link:hover .tutor-card { background: #ffffff; border: 2px solid #1269ba; cursor: pointer; } .favorite-heart-btn { margin-top:-5px; background: none; border: none; cursor: pointer; font-size: 20px; transition: transform 0.2s ease; position: relative; z-index: 10; } .favorite-heart-btn:hover { transform: scale(1.1); } /* All interactive buttons need higher z-index to be clickable above card link */ .tutor-action-btn, .tutor-live-btn, .tutor-ask-btn, .tutor-mobile-btn, .ask-tutor, .live-invitation-btn, .video-btn, .video-message-btn, .video-profile-btn { position: relative; z-index: 10; } .tutor-description p { margin: 0; font-size: 16px; color: black; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-variation-settings: normal; letter-spacing: 0; line-height: 24px; font-weight: 400; } .select2-container--default .select2-selection--multiple { border: 1px solid #d1d5db !important; border-radius: 8px !important; min-height: 38px !important; } .select2-container--default .select2-selection--single { border: 1px solid #d1d5db !important; border-radius: 8px !important; height: 38px !important; } .select2-search--dropdown .select2-search__field { width: 100% !important; padding: 8px !important; box-sizing: border-box !important; pointer-events: auto !important; cursor: text !important; } .select2-dropdown .select2-search__field { display: block !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .select2-search--dropdown { padding: 8px !important; pointer-events: auto !important; } #clear-filters:hover { background: #e5e7eb; color: #374151; } .searched-result-display > div[class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } .filter-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1999; } .filter-overlay.show { display: block; } .results-header-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; } .results-header-row > div { min-width: 220px !important; } .close-filter-btn-outside-desktop { display: none; position: fixed; top: 16px; right: 16px; background: #0066cc; border: none; font-size: 20px; color: white; cursor: pointer; padding: 8px; width: 40px; height: 40px; border-radius: 50%; transition: all 0.2s; z-index: 2001; box-shadow: 0 4px 12px rgba(0,0,0,0.3); align-items: center; justify-content: center; } .close-filter-btn-outside-desktop.show { display: flex !important; } .close-filter-btn-outside-desktop:hover { background: #0052a3 !important; transform: scale(1.05); } .minimum-body-height-size{ overflow-x: initial !important; } #mobile-filter-toggle-btn { display: none !important; } .desktop-section { display: block; } @media (max-width: 767px) { .searched-result-display { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; } .searched-result-display > * { width: 100% !important; } } @media (max-width: 768px) { .header, #mainNav, .navbar-fixed-top { z-index: 1 !important;position: sticky !important; background: white !important; } .sticky-top-bar {z-index: 140 !important;} .container-fluid { padding: 15px !important; } #sort-by-desktop-container{ width: 100% !important; } #mobile-filter-toggle-btn { display: inline-flex !important; margin-left: auto !important; } #filter-sidebar { position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 85% !important; max-width: 350px !important; border-radius: 0 !important; z-index: 2000 !important; overflow-y: auto !important; margin: 0 !important; box-shadow: 2px 0 10px rgba(0,0,0,0.10) !important; /* Enhanced, GPU-accelerated slide + fade */ transform: translateX(-100%) scale(0.98) !important; opacity: 0 !important; transition: transform 1000 cubic-bezier(.2,.7,.3,1), opacity 620ms ease, box-shadow 1000 ease; will-change: transform, opacity; backface-visibility: hidden; } #filter-sidebar.show { transform: translateX(0) scale(1) !important; opacity: 1 !important; box-shadow: 4px 0 18px rgba(0,0,0,0.18) !important; } /* Overlay fade-in for nicer perception */ .filter-overlay { opacity: 0; transition: opacity 240ms ease; } .filter-overlay.show { opacity: 1; } .filter-sidebar-col { display: contents !important; } .tutor-cards-col{ width: 100% !important; } .select2-container--open { z-index: 99999 !important; } .select2-dropdown { z-index: 99999 !important; position: absolute !important; } /* Higher z-index for filter dropdowns */ #selected-cities + .select2-container--open { z-index: 100000 !important; } #selected-cities + .select2-container .select2-dropdown { z-index: 100000 !important; } #filter-sidebar .select2-container { z-index: 1 !important; } .close-filter-btn-outside-desktop.show { display: flex !important; } /* Mobile filter styling */ #filter-sidebar { padding: 16px !important; } /* Make filters stack vertically on mobile */ #main-filters { flex-direction: column !important; gap: 12px !important; } #main-filters > div { flex-direction: column !important; gap: 12px !important; width: 100% !important; } /* Make all filter buttons full width */ #main-filters button[id$="-filter-toggle"], #main-filters > div > div { width: 100% !important; flex: none !important; } /* Adjust dropdown widths for mobile */ #main-filters [id$="-dropdown-panel"] { width: 100% !important; max-width: calc(100vw - 80px) !important; left: 0 !important; } /* Hide filter section on mobile by default */ #desktop-filter-section { display: none !important; } /* Show when sidebar has .show class */ #desktop-filter-section:has(#filter-sidebar.show) { display: block !important; } } @media (min-width: 769px) { .tutor-description .clamp-3-lines, .tutor-description p{ font-family: 'Figtree', 'Figtree-fallback', 'Figtree-fallback-android', 'Noto Sans', 'NotoSans-fallback', 'NotoSans-fallback-android', sans-serif; } .filter-sidebar-col { position: sticky; height: fit-content; left: 0; top: 10px; padding: 0 !important; } .row{ padding: 0 !important; } #filter-sidebar{ padding: 0 !important; } } @media (min-width: 768px){ .col-lg-9{ margin-top: 25px !important; } } @media (max-width: 768px) { .tutor-cards-col { width: 100% !important; padding: 0 !important; } .tutor-card { flex-direction: column !important; } .tutor-img { flex: 0 0 auto !important; } .tutor-img a { height: auto !important; } .tutor-card-inner { width: 100% !important; } .results-header-left h2{ font-size: 16px !important; } .tutor-img img { max-height: 280px !important; width: 100% !important; height: auto !important; object-fit: cover !important; } .select2-container--open { z-index: 99999 !important; } .select2-dropdown { z-index: 99999 !important; position: absolute !important; } /* Higher z-index for city filter dropdown */ #selected-cities + .select2-container--open { z-index: 100000 !important; } #selected-cities + .select2-container .select2-dropdown { z-index: 100000 !important; } .header-container { background: none !important; min-height: auto !important; max-height: none !important; } .freelancer-background-subheading, .yellow-surface, .margin-left-section-background { display: none !important; } .main-heading-page, .freelancer-background-heading { font-size: 22px !important; color: #1269ba !important; } .filter-sidebar-col { width: 100% !important; padding-right: 0 !important; } .tutor-cards-col { width: 100% !important; padding-left: 0 !important; } .results-header-card { padding: 15px !important; border-radius: 12px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important; background: white !important; } .results-header-row { flex-direction: column !important; align-items: stretch !important; gap: 15px !important; } #sort-by-desktop { width: 100% !important; } .results-header-row label { white-space: nowrap !important; display: inline-block !important; } .tutor-description { display: none !important; } .tutor-name-heading { font-size: 16px !important; } .desktop-section > div > div[style*="padding: 14px 40px"] { padding-left: 10px !important; padding-right: 10px !important; } .desktop-section div[style*="background: #dbeafe"] span { display: none !important; } .desktop-section div[style*="background: #dbeafe"]::before { content: "Applied: "; font-size: 16px !important; } } .profile-card-div img { object-fit: cover !important; } .col-sm-12{ float: initial !important; } .counted { font-size: 20px !important; font-weight: 700 !important; } .tutor-price-heart-container:has(.favorite-heart-btn:only-child) { justify-content: flex-end !important; } /* .tutor-img-container.online { border: 3px solid #057f47; } .tutor-img-container.offline { border: 3px solid #9ca3af; } */ .tutor-name-info { flex: 1; } .tutor-skill-badge { display: inline-block; color: black; font-size: 15px; font-weight: 600; margin: 8px 0; } .tutor-skill-badge i { margin-right: 4px; color: #8b5cf6; } .stat-label.no-review { color: #9ca3af; font-size: 20px; font-family: 'Georgia', 'Times New Roman', serif; } .tutor-price-badge.price-upon-request { background: none; border: none; } .tutor-price-badge.price-upon-request .price-label { font-size: 14px; color: #6b7280; font-weight: 600; font-style: italic; font-family: 'Georgia', 'Times New Roman', serif; } /*#4b5563*/ .tutor-tagline { color: #6b7280; padding: 10px 0px; font-style: normal; font-variation-settings: normal; letter-spacing: 0; line-height: 24px; font-weight: 400; font-size: 14px; } .tutor-card{ min-height: 220px; } .flag-icon { display: inline-block; width: 18px; height: 16px; background-size: contain; background-position: 50%; background-repeat: no-repeat; margin-left: 8px; vertical-align: middle; } .tutor-cta-right { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 25px; flex-wrap: nowrap; } .blank-portion{ display: none !important; } /* Fast Bootstrap Tooltips - Override default styling */ .tooltip { pointer-events: none !important; z-index: 100000 !important; } .tooltip .tooltip-inner { background-color: rgba(0, 0, 0, 0.92) !important; color: #fff !important; padding: 8px 14px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important; max-width: 300px !important; } .tooltip.bs-tooltip-top .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: rgba(0, 0, 0, 0.92) !important; } .tooltip.bs-tooltip-right .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: rgba(0, 0, 0, 0.92) !important; } .tooltip.bs-tooltip-bottom .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: rgba(0, 0, 0, 0.92) !important; } .tooltip.bs-tooltip-left .arrow::before, .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: rgba(0, 0, 0, 0.92) !important; } /* Faster fade-in animation */ .tooltip.show { opacity: 1 !important; } .tooltip.fade { transition: opacity 0.1s ease !important; } .mobile-card{ display: none !important; } @media (max-width: 768px) { .container{ padding-right: 0 !important; padding-left: 0 !important; } .mobile-card{ display: block !important; } .desktop-tutor-card{ display: none !important; } .tutor-card { display: flex !important; flex-direction: column !important; padding: 20px !important; margin-bottom: 16px !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; background: #fff !important; } .tutor-img-section { position: relative !important; width: 120px !important; margin-top: 0px !important; margin-left: 0px !important; flex-shrink: 0 !important; display: flex !important; flex-direction: column !important; box-sizing: border-box !important; z-index: 1 !important; } .tutor-img-container { position: relative !important; width: 100%; height: 110px; border-radius: 12px !important; overflow: hidden !important; flex-shrink: 0 !important; } .tutor-profile-img { width: 100% !important; height: 110px !important; object-fit: cover !important; display: block !important; } .tutor-content-section { width: 100% !important; padding: 0 !important; display: flex !important; flex-direction: column !important; } .tutor-header { text-align: left !important; margin-top: 8px !important; } .tutor-name { font-size: 20px !important; font-weight: 600 !important; margin-bottom: 15px !important; } .tutor-header.single-stat .tutor-name { margin-top: 10px !important; } .mobile-no-review{ text-align: left !important; font-family: 'Georgia', 'Times New Roman', serif; color:#9ca3af; font-size: 16px; } .tutor-mobile-wrapper { width: 100% !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 12px !important; } .tutor-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; } .tutor-stats-row { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; margin-top: 8px !important; } .tutor-stats-row:has(.tutor-stat:only-child) { margin-top: 10px !important; } .tutor-content-section .tutor-price-badge { display: none !important; } .tutor-card .tutor-content-section { display: none !important; } .tutor-mobile-buttons { display: flex !important; flex-direction: row !important; gap: 8px !important; flex-wrap: wrap !important; width: 100% !important; justify-content: space-between !important; } /* When only one button is present, right-align it */ .tutor-mobile-buttons:has(.tutor-mobile-btn:only-child) { justify-content: flex-end !important; } .minimum-body-height-size{ margin-top: 0 !important; } .tutor-mobile-btn { min-width: 135px !important; max-width: 200px !important; padding: 10px 16px !important; border-radius: 6px !important; font-size: 14px !important; text-align: left !important; border: none !important; cursor: pointer !important; transition: all 0.3s ease !important; } .tutor-tagline{ font-size: 13px !important; padding-top: 0 !important; } .tutor-mobile-btn.tutor-ask-btn { background: transparent !important; color: #3b82f6 !important; border: 1px solid #3b82f6 !important; font-weight: 500 !important; } .tutor-mobile-btn.tutor-ask-btn:hover { background:gray !important; } .tutor-mobile-btn.tutor-live-btn { background: #1269ba !important; color: #ffffff !important; font-weight: 600 !important; text-align: center !important; } .tutor-mobile-btn.tutor-live-btn:hover { background: #3b82f6 !important; } .tutor-mobile-content { width: 100% !important; display: block !important; } .tutor-skill-badge { display: inline-block !important; width: auto !important; font-size: 15px !important; background: transparent !important; color: black !important; margin-top: 25px !important; } .tutor-free-session-badge { position: static !important; display: inline-block !important; margin: 8px 0px 0px 0px !important; width: max-content !important; font-size: 12px !important; white-space: nowrap !important; } .tutor-free-session-badge .free-amount, .tutor-free-session-badge .free-label { display: inline !important; margin: 0 !important; } .tutor-mobile-stats { display: block !important; margin: 0 0 12px 0px !important; } .mobile-stat { font-size: 14px !important; color: #6b7280 !important; line-height: 1.4 !important; display: block !important; } .tutor-mobile-description { margin: 0 0 12px 0 !important; width: 100% !important; display: block !important; text-align: left !important; } .tutor-mobile-description .mobile-desc { font-size: 13px !important; font-weight: 400; line-height: 1.8 !important; color: black !important; display: block !important; visibility: visible !important; opacity: 1 !important; } .tutor-stats-row { margin: 0 !important; display: flex !important; gap: 16px !important; flex-wrap: nowrap !important; } .tutor-stat { font-size: 12px !important; text-align: left !important; } .stat-value { font-size: 20px !important; font-weight: 600 !important; } .stat-label { font-size: 15px !important; } .tutor-price-badge { font-size: 12px !important; text-align: left !important; display: inline-block !important; } .mobile-price { display: block !important; width: fit-content !important; } .price-amount { font-size: 21px !important; font-weight: 600 !important; } .price-label { font-size: 14px !important; } .tutor-cta-right { position: relative !important; width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; } .tutor-action-btn { width: 100% !important; padding: 12px 16px !important; font-size: 14px !important; text-align: left !important; border-radius: 6px !important; min-height: 44px !important; } .desktop-desc { display: none !important; } .mobile-desc { display: block !important; } .favorite-heart-top { position: absolute; right: 13px; top: 15px; font-size: 20px !important; z-index: 10 !important; } .tutor-online-badge { width: 16px !important; height: 16px !important; bottom: 4px !important; right: 4px !important; border-width: 2px !important; } } @media (min-width: 768px) { .desktop-tutor-cards { display: block !important; } .mobile-tutor-cards { display: none !important; } } @media (max-width: 767px) { .desktop-tutor-cards { display: none !important; } .mobile-tutor-cards { display: block !important; z-index: 0 !important; } } /* Ensure Select2 dropdowns and inputs have white background */ .select2-dropdown { background: #ffffff !important; } .select2-results__option { background: #ffffff !important; } .select2-search--dropdown { background: #ffffff !important; } .select2-container--default .select2-selection--single { background: #ffffff !important; } .select2-container--default .select2-selection--multiple { background: #ffffff !important; } /* Fix dropdown hover issues - prevent dropdown from closing on hover */ .select2-dropdown { pointer-events: auto !important; } .select2-results__option { pointer-events: auto !important; } .select2-results__option:hover { background-color: black !important; pointer-events: auto !important; } .select2-results__option--highlighted { background-color: black !important; pointer-events: auto !important; } .select2-results__message:hover{ color: white !important; } /* Show more tutors button styling */ .pagination .show-more-tutors { display: block !important; width: 100% !important; text-align: center !important; padding: 12px 16px !important; background: #1269ba !important; /* match Free Call */ color: white !important; /* black text as requested */ border: 1px solid #0f57a0 !important; border-radius: 10px !important; font-weight: 600 !important; font-size: 18px !important; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease !important; position: relative !important; overflow: hidden !important; } .pagination .show-more-tutors:hover { background: gray !important; border-color: gray !important; transform: translateY(-1px) !important; box-shadow: 0 6px 16px rgba(18,105,186,0.25) !important; text-decoration: none !important; } .pagination .show-more-tutors.loading { display: none !important; } @media (max-width: 768px) { .pagination .show-more-tutors { padding: 10px 14px !important; font-size: 14px !important; border-radius: 8px !important; } } /* Grow skew hover effect */ .pagination .show-more-tutors::after { content: ""; position: absolute !important; left: -20%; right: -20%; top: 0; bottom: 0; background: rgba(255,255,255,0.18); transform: skewX(-45deg) scale(0, 1); transition: transform .25s ease; } .pagination .listing-loader{position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);margin:12px 0 16px 0!important;z-index:1;display:flex;justify-content:center;align-items:center} .book,.book__pg-shadow,.book__pg{animation:cover 5s ease-in-out infinite} .book{background-color:#1269ba;border-radius:.25em;box-shadow:0 .25em .5em rgba(0,0,0,.3),0 0 0 .25em #0f57a0 inset;padding:.25em;perspective:37.5em;position:relative;width:8em;height:6em;transform:translate3d(0,0,0);transform-style:preserve-3d} .book__pg-shadow,.book__pg{position:absolute;left:.25em;width:calc(50% - .25em)} .book__pg-shadow{animation-name:shadow;background-image:linear-gradient(-45deg,hsla(0,0%,0%,0) 50%,hsla(0,0%,0%,.3) 50%);filter:blur(.25em);top:calc(100% - .25em);height:3.75em;transform:scaleY(0);transform-origin:100% 0} .book__pg{animation-name:pg1;background-color:#fff;background-image:linear-gradient(90deg,hsla(223,10%,90%,0) 87.5%,#e1e4e8);height:calc(100% - .5em);transform-origin:100% 50%} .book__pg--2,.book__pg--3,.book__pg--4{background-image:repeating-linear-gradient(#1269ba 0 .125em,hsla(223,10%,10%,0) .125em .5em),linear-gradient(90deg,hsla(223,10%,90%,0) 87.5%,#e1e4e8);background-repeat:no-repeat;background-position:center;background-size:2.5em 4.125em,100% 100%} .book__pg--2{animation-name:pg2} .book__pg--3{animation-name:pg3} .book__pg--4{animation-name:pg4} .book__pg--5{animation-name:pg5} @keyframes cover{from,5%,45%,55%,95%,to{animation-timing-function:ease-out;background-color:#1a7dd6}10%,40%,60%,90%{animation-timing-function:ease-in;background-color:#0d4a8a}} @keyframes shadow{from,10.01%,20.01%,30.01%,40.01%{animation-timing-function:ease-in;transform:translate3d(0,0,1px)scaleY(0)rotateY(0)}5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{animation-timing-function:ease-out;transform:translate3d(0,0,1px)scaleY(.2)rotateY(90deg)}10%,20%,30%,40%,50%,to{animation-timing-function:ease-out;transform:translate3d(0,0,1px)scaleY(0)rotateY(180deg)}50.01%,60.01%,70.01%,80.01%,90.01%{animation-timing-function:ease-in;transform:translate3d(0,0,1px)scaleY(0)rotateY(180deg)}60%,70%,80%,90%,to{animation-timing-function:ease-out;transform:translate3d(0,0,1px)scaleY(0)rotateY(0)}} @keyframes pg1{from,to{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(.4deg)}10%,15%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(180deg)}20%,80%{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(180deg)}85%,90%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(180deg)}} @keyframes pg2{from,to{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(.3deg)}5%,10%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(.3deg)}20%,25%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(179.9deg)}30%,70%{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(179.9deg)}75%,80%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(179.9deg)}90%,95%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(.3deg)}} @keyframes pg3{from,10%,90%,to{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(.2deg)}15%,20%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(.2deg)}30%,35%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(179.8deg)}40%,60%{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(179.8deg)}65%,70%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(179.8deg)}80%,85%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(.2deg)}} @keyframes pg4{from,20%,80%,to{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(.1deg)}25%,30%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(.1deg)}40%,45%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(179.7deg)}50%{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(179.7deg)}55%,60%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(179.7deg)}70%,75%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(.1deg)}} @keyframes pg5{from,30%,70%,to{animation-timing-function:ease-in;background-color:#6b7280;transform:translate3d(0,0,1px)rotateY(0)}35%,40%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(0deg)}50%{animation-timing-function:ease-in-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(179.6deg)}60%,65%{animation-timing-function:ease-out;background-color:#fff;transform:translate3d(0,0,1px)rotateY(0)}} .pagination .show-more-tutors:hover::after { transform: skewX(-45deg) scale(1, 1); } /* Clamp description to 3 lines on ALL viewports, ensure link on next line */ .tutor-description .clamp-3-lines, .tutor-description p, .tutor-description .mobile-desc { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; margin-bottom: 6px !important; } .tutor-description .view-more-line { display: inline-block !important; width: 100% !important; margin-top: 2px !important; color: #0066cc !important; font-weight: 600 !important; } /* Grey when hidden (offline) - overrides green default */ .tutor-online-badge.hidden { display: block !important; background: #9ca3af !important; border: 2px solid white !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important; } /* General hidden utility class */ .hidden { display: none !important; } /* ========== FILTER-SPECIFIC STYLES (MOVED FROM INLINE) ========== */ /* Country Checkbox Item Hover */ .country-checkbox-item:hover { background-color: #f9fafb; } /* Education Checkbox Item Hover */ .education-checkbox-item:hover { background-color: #f9fafb; } /* Skills Checkbox Item Hover */ .skills-checkbox-item:hover { background-color: #f9fafb; } /* Online Toggle Switch Styles */ .toggle-switch { position: relative; width: 56px; height: 28px; cursor: pointer; flex-shrink: 0; } .toggle-switch input[type="checkbox"] { display: none; } .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; border-radius: 28px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .toggle-slider:before { content: ""; position: absolute; height: 22px; width: 22px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } input:checked + .toggle-slider { background-color: #0066cc; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2); } input:checked + .toggle-slider:before { transform: translateX(28px); box-shadow: 0 2px 6px rgba(0, 102, 204, 0.4); } .toggle-switch:hover .toggle-slider { box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.1); } input:checked + .toggle-slider:hover { background-color: #0052a3; } /* Hide scrollbars from dropdown panels */ #price-dropdown-panel, #education-dropdown-panel, #years-dropdown-panel, #rating-dropdown-panel, #available-dropdown-panel, #city-dropdown-panel { overflow: visible !important; -ms-overflow-style: none !important; scrollbar-width: none !important; } #price-dropdown-panel::-webkit-scrollbar, #education-dropdown-panel::-webkit-scrollbar, #years-dropdown-panel::-webkit-scrollbar, .select2-results__options::-webkit-scrollbar, #available-dropdown-panel::-webkit-scrollbar, #city-dropdown-panel::-webkit-scrollbar, #popular-countries-list::-webkit-scrollbar, #education-list::-webkit-scrollbar, #skills-list::-webkit-scrollbar { display: none !important; } /* Years Teaching Slider Styles */ #min-years { margin: auto; -webkit-appearance: none; appearance: none; position: relative; overflow: hidden; height: 40px; width: 100%; cursor: pointer; border-radius: 0; } #min-years::-webkit-slider-runnable-track { background: #ddd; height: 40px; } #min-years::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 40px; background: #fff; box-shadow: -200px 0 0 200px dodgerblue; border: 2px solid #999; cursor: pointer; } #min-years::-moz-range-track { height: 40px; background: #ddd; } #min-years::-moz-range-thumb { background: #fff; height: 40px; width: 20px; border: 3px solid #999; border-radius: 0 !important; box-shadow: -200px 0 0 200px dodgerblue; box-sizing: border-box; cursor: pointer; } #min-years::-moz-range-progress { background-color: dodgerblue; height: 40px; } #min-years::-ms-fill-lower { background: dodgerblue; } #min-years::-ms-thumb { background: #fff; border: 2px solid #999; height: 40px; width: 20px; box-sizing: border-box; cursor: pointer; } #min-years::-ms-ticks-after { display: none; } #min-years::-ms-ticks-before { display: none; } #min-years::-ms-track { background: #ddd; color: transparent; height: 40px; border: none; } #min-years::-ms-tooltip { display: none; } /* Rating Stars Hover Effect */ .rating-star-filter:hover { transform: scale(1.15); color: #0066cc !important; } .rating-star-filter.active { color: #0066cc !important; } /* Price Range Slider Styles */ #min-price, #max-price { -webkit-appearance: none; appearance: none; outline: none; pointer-events: all; position: relative; } #min-price { z-index: 3; } #max-price { z-index: 2; } #min-price:active, #min-price:focus { z-index: 4; } #max-price:active, #max-price:focus { z-index: 4; } /* Webkit (Chrome, Safari, Edge) */ #min-price::-webkit-slider-thumb, #max-price::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; background: #ffffff; border: 4px solid #0066cc; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 102, 204, 0.2); position: relative; z-index: 3; } #min-price::-webkit-slider-thumb:hover, #max-price::-webkit-slider-thumb:hover { background: #f9fafb; box-shadow: 0 3px 8px rgba(0, 102, 204, 0.3); } /* Firefox */ #min-price::-moz-range-thumb, #max-price::-moz-range-thumb { width: 28px; height: 28px; background: #ffffff; border: 4px solid #0066cc; border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 102, 204, 0.2); } #min-price::-moz-range-thumb:hover, #max-price::-moz-range-thumb:hover { background: #f9fafb; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); } /* Hide default track */ #min-price::-webkit-slider-runnable-track, #max-price::-webkit-slider-runnable-track { background: transparent; border: none; } #min-price::-moz-range-track, #max-price::-moz-range-track { background: transparent; border: none; } /* Hide video containers on mobile/tablet (below 1024px) and expand cards to full width */ @media (max-width: 1024px) { .tutor-video-container { display: none !important; } /* Make tutor cards take full width when video is hidden */ .tutor-card-wrapper.desktop-tutor-card .tutor-card-inner { display: block !important; } .tutor-card-wrapper.desktop-tutor-card .tutor-card { width: 100% !important; max-width: 100% !important; } } /* ========== TUTOR VIDEO SIDE BY SIDE STYLES (DESKTOP ONLY - ABOVE 1024px) ========== */ @media (min-width: 1025px) { /* Container for card + video layout */ .tutor-card-wrapper.desktop-tutor-card .tutor-card-inner { display: flex !important; flex-direction: row !important; gap: 20px; align-items: stretch; width: 100%; } .desktop-tutor-card { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; width: 100%; } /* Video container (right side) - ALWAYS takes space */ .tutor-video-container { width: 330px; min-width: 330px; height: 330px; min-height: 330px; opacity: 0; overflow: hidden; border-radius: 16px; background: #fff; display: flex; flex-direction: column; flex-shrink: 0; order: 2; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; border: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); padding: 16px; pointer-events: none; will-change: transform, opacity; transform: translateY(0); } /* Show video on hover */ .tutor-card-wrapper[data-has-video="1"]:hover .tutor-video-container { opacity: 1; pointer-events: auto; } /* First card video visible by default (without hover) */ .tutor-card-wrapper[data-has-video="1"]:first-child .tutor-video-container { opacity: 1; pointer-events: auto; } /* Hide first card video when any other card is hovered */ .desktop-tutor-cards:has(.tutor-card-wrapper[data-has-video="1"]:not(:first-child):hover) .tutor-card-wrapper[data-has-video="1"]:first-child .tutor-video-container { opacity: 0; pointer-events: none; } /* Slide down animation - when moving to a card below */ .tutor-video-container.slide-from-top { animation: slideInFromTop 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } /* Slide up animation - when moving to a card above */ .tutor-video-container.slide-from-bottom { animation: slideInFromBottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes slideInFromTop { 0% { transform: translateY(-340px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slideInFromBottom { 0% { transform: translateY(340px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* Card takes remaining space (always same width) */ .tutor-card-wrapper.desktop-tutor-card .tutor-card { flex: 1; order: 1; min-width: 0; } /* Video preview wrapper */ .video-preview-wrapper { width: 100%; height: 280px; position: relative; overflow: hidden; border-radius: 6px; border: 2px solid #1269ba; cursor: pointer; } /* Video placeholder for progressive hydration - subtle loading state */ .video-preview-wrapper.video-placeholder { background: linear-gradient(110deg, #e0e7ff 8%, #f0f4ff 18%, #e0e7ff 33%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Video elements - show as thumbnail preview */ .tutor-video-iframe, .tutor-video-player { opacity: 1; position: relative; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* For YouTube iframes, show thumbnail */ .tutor-video-iframe { background-size: cover; background-position: center; } /* Video action buttons container */ .video-action-buttons { display: flex; flex-direction: column; gap: 0; padding: 0; background: #fff; border-radius: 0 0 16px 16px; } /* Video button styles */ .video-btn { display: block; width: 100%; padding: 12px 24px; text-align: center; font-size: 16px; font-weight: 600; color: #1a1a1a; background: #fff; border: none; border-top: 1px solid #f0f0f0; text-decoration: none; transition: background 0.15s ease; cursor: pointer; line-height: 1.3; } .video-btn:nth-child(1), .video-btn:nth-child(2) { border: 2px solid #dcdce5; margin-top: 10px; border-radius: 10px; color:#1269ba !important; } .video-btn:hover { background: #fafafa; } .video-btn:active { background: #f5f5f5; } /* Play icon overlay on video preview - only for HTML5 videos (not YouTube) */ .video-preview-wrapper:has(.tutor-video-player):after { content: '\f04b'; font-family: 'FontAwesome'; position: absolute; bottom: 15px; right: 15px; width: 45px; height: 45px; background: #0066cc; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; opacity: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; pointer-events: none; z-index: 10; box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4); } .video-preview-wrapper:has(.tutor-video-player):hover:after { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0, 102, 204, 0.6); } /* Video Modal/Lightbox Styles */ .video-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; display: flex; align-items: center; justify-content: center; } .video-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); } .video-modal-content { position: relative; width: 80%; max-width: 900px; z-index: 100000; } .video-modal-close { position: absolute; top: -45px; right: -10px; background: rgba(0, 0, 0, 0.5); border: 2px solid #fff; color: white; font-size: 28px; cursor: pointer; z-index: 100001; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; line-height: 1; } .video-modal-close:hover { background: rgba(0, 0, 0, 0.8); transform: rotate(90deg); } .video-modal-player { width: 100%; background: #000; border-radius: 12px; overflow: hidden; position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .video-modal-player iframe, .video-modal-player video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px; } /* Video elements sizing */ .tutor-video-iframe, .tutor-video-player { width: 100%; height: 100%; object-fit: cover; border: none; display: block; } /* Ensure card wrapper has proper positioning */ .tutor-card-wrapper.desktop-tutor-card { position: relative; overflow: visible; } /* Add play icon indicator on video container (right side) */ .tutor-card-wrapper[data-has-video="1"] .tutor-video-container { position: relative; } }