/*!
* Theme Name: Mobportal
* Theme URI: https://mobportal.com
* Author: Mobportal LLC.
* Author URI: https://mobportal.com
* Description: A WordPress Theme
* Version: 1.0
* Text Domain: Mobportal LLC.
*/
@font-face{font-family:'Noor';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/AGCRegular.woff2) format('woff2'),url(fonts/AGCRegular.ttf) format('truetype')} @font-face{font-family:'Noor';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/AGCLight.woff2) format('woff2'),url(fonts/AGCLight.ttf) format('truetype')} @font-face{font-family:'Noor';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/AGCBold.woff2) format('woff2'),url(fonts/AGCBold.ttf) format('truetype')} *,::after,::before{box-sizing:border-box;-webkit-box-sizing:border-box} .addcompare,.compare-remove{appearance:none;-webkit-appearance:none;border:0;padding:0;font:inherit;cursor:pointer;} body{   font-family:'Noor',sans-serif;font-weight:400;line-height:1.5; padding: 0; margin: 0;color:#575756;text-align:right;background-color:#f5f5f5} @media (min-width: 500px){ .wrp { padding: 0 2rem; } } .wrp { width: 100%; max-width: calc(1200px + 4rem); margin: 0 auto; } a { text-decoration: none; color: #dd348a; } h1, h2, h3, h4, h5,h6 { padding: 0; margin: 0; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; border: none; padding: 0 1em 0 0; margin: 0; width: 100%; font-family: inherit; line-height: inherit; z-index: 1; outline: none; cursor: pointer; } button, select { text-transform: none; } input[type=submit],a.dawireft { outline: none; border: none; color: #ffffff; background: #dd348a; text-align: center; text-decoration: none; font-family: inherit; font-size: 16px; cursor: pointer; display: block; width: 100%; margin: 12px auto; line-height: 24px; border-radius: 30px; padding: 12px 20px; }.addcompare.is-selected{background:#575756}.mobileListImage.no-image{display:block;width:160px;height:212px;max-width:100%;background:#f1f1f1;border-radius:16px}.marka-image.no-image{display:block;width:70%;aspect-ratio:1/1;margin:auto;position:absolute;left:0;top:0;right:0;bottom:30px;background:#f1f1f1;border-radius:50%}.mob-main-img.no-image,.post-img.no-image{display:block;width:100%;min-height:220px;background:#f1f1f1;border-radius:16px}.brand-thumb.no-image{display:inline-block;width:45px;height:45px;background:#f1f1f1;border-radius:50%}.wp-caption { width: 100% !important; }.header-wrp { display: block; box-shadow: 0 0px 20px 12px rgb(0 0 0 / 5%); background: #fff; position: relative; border-top: 16px solid #31b7d1; z-index: 1; } .header-wrp > .wrp { display: flex; } .logo { margin-left: 20px; align-items: center; display: flex; } .logo a { align-items: center; display: flex; } .header-menu ul { display: flex; align-items: center; padding: 0; margin: 0; } .header-menu ul li { list-style: none; padding: 20px 0.75rem; } .header-menu ul li a { padding: 0 24px; line-height: 30px; font-size: 17px; color: #575756; border: 1px solid #575756; border-radius: 30px; align-items: center; display: flex; } .header-menu ul li a svg { margin-left: 4px; } .view-white-wrp { background-color: #fff; box-shadow: 0 0 20px 0 rgb(0 0 0 / 1%); padding: 2rem; } .three-sides-container { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; } .h3home { background: #575756; color: #fff; border-radius: 10px 10px 30px 30px; padding: 0; font-weight: 400; font-size: 18px; line-height: 1; position: relative; align-items: center; display: flex; justify-content: center; height: 52px; } .h3home svg { margin-left: 6px; display: inline-flex; } .h3home:after { content: ""; display: block; height: 4px; background: #dd348a; position: absolute; bottom: -2px; right: 0; left: 0; max-width: 60%; margin: 0 auto; border-radius: 4px; } .home-top .home-mobile-select { border-left: 1px solid #d9d9d9; display: block; padding: 30px; padding-top: 24px; margin-top: 22px; } .home-mobile-select select { color: #ffffff; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, #50e3f4, #50e3f4); background-position: 15px 22px, 20px 22px, 38px; background-size: 5px 5px, 5px 5px, 1px 22px; background-repeat: no-repeat; padding: 14px 20px 14px 50px; background-color: #31b7d1; border-radius: 30px; font-size: 14px; } .home-mobile-select .brand-select { margin-bottom: 12px; } .home-middle ul li,.home-buttom ul li { list-style: none; } .home-middle ul li { padding-left: 40px; } ul.ma3ak-kam-menu { display: block; margin: 20px 0; margin-left: 30px; height: 236px; overflow-y: scroll; overflow-x: hidden; padding: 0; padding-right: 30px; scrollbar-color: #32b7d1 #d9d9d9; scrollbar-width: thin !important; } ul.ma3ak-kam-menu li a { color: #575756; display: block; border-bottom: 1px solid #dcdcdc; padding: 8px 5px; } .home-buttom ul { display: block; width: 90%; margin: 30px auto; counter-reset: css-counter 0; padding: 0; } .home-buttom ul li { display: block; counter-increment: css-counter 1; align-items: center; } .home-buttom ul li a { background: #ececec; border-radius: 30px; padding: 10px 10px; margin-bottom: 16px; color: #585856; padding-right: 54px; position: relative; align-items: center; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .home-buttom ul li a:after { content: ''; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%); background-position: 15px 22px, 20px 22px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; display: block; position: absolute; left: 10px; width: 30px; top: 0; bottom: 8px; transform: rotate(90deg); } .home-buttom ul li a:before { content: counter(css-counter); display: inline-block; background: #fff; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 30px; position: absolute; right: 10px; top: 7px; } /* Brands List Home */ .brandslist-container { display: grid; grid-template-columns: repeat(8,1fr); gap: 20px; margin: 20px; margin-top: 24px; } .brandslist-container-inside { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin: 20px; margin-top: 24px; } .brandslist-container a,.brandslist-container-inside a { margin: auto; text-align: center; text-decoration: none; display: block; width: 100%; position: relative; background-color: #ececec; border-radius: 14px; padding: 15px; padding-top: 80%; } .brandslist-container img,.brandslist-container-inside img { width: 70%; height: auto; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 30px; } .brandslist-container p,.brandslist-container-inside p { margin: 0; font-size: 16px; line-height: 20px; padding: 2px; color: #575756; } /* Main Content */ .main-container { display: block; margin-bottom: 20px; } .maincontent { float: right; width: 70%; } .maqalatcontainer { display: block; padding-left: 30px; } .maqalat-img { float: right; width: 320px; height: 216px; } .maqalat-img img { width: 100%; max-width: 100%; height: 100%; } .sidebar { float: left; width: 30%; } .sidebar ul:not(.sidebar ul.search_result) { display: block; width: 90%; margin: 30px auto; margin-top: 20px; counter-reset: css-counter 0; padding: 0; } .sidebar ul li:not(.sidebar .search_result li) { display: block; align-items: center; list-style: none; } .sidebar ul li a:not(.home-buttom ul li a,.sidebar .search_result li a) { background: #ececec; border-radius: 30px; padding: 7px 10px; margin-bottom: 16px; color: #585856; position: relative; align-items: center; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .sidebar ul li a span { margin-left: 10px; display: inline-block; background: #fff; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 30px; } .postslist .item { display: block; background: #ececec; border-radius: 30px; overflow: hidden; position: relative; margin-bottom: 20px; } .maqalat-cont { display: block; padding: 24px 18px; overflow: hidden; padding-bottom: 22px; position: relative; height: 214px; } .maqalat-cont h4 { color: #5e5755; display: block; font-weight: 400; font-size: 20px; line-height: 28px; } .maqalat-cont p { color: #868686; font-size: 13px; font-weight: 100; margin: 10px 0; margin-bottom: 18px; line-height: 18px; } .maqalat-cont a { background: #dd348a; color: #fff; float: left; font-size: 13px; padding: 6px 22px; border-radius: 30px; align-items: center; display: flex; justify-content: center; position: absolute; bottom: 20px; left: 20px; font-weight: 100; } .maqalat-img a:after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 2; } .maqalat-cont a svg { margin-left: 4px; } .homemaqalatcontainer .postslist { border-left: 1px solid #d9d9d9; display: block; padding: 0 30px; padding-right: 20px; margin-top: 30px; } /* Pagination */ .pagination { text-align: center; display: block; overflow: hidden; padding: 10px 0; } .pagination a:not(.next_page), .pagination span.current, .pagination span.dots { display: inline-block; width: 34px; height: 34px; line-height: 34px; border-radius: 6px; margin-left: 2px; margin-right: 2px; color: #595855; background: #ececec; } .pagination a:not(.next_page) { } .arrowright { transform: scaleX(-1); -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); } .pagination .current, .pagination .next_page a, .pagination .previous_page a { background: #dd348a!important; color: #ffffff!important; } /* News */ .news-container .postslist { display: block; padding: 0 24px; } .news-container .postslist .maqalat-cont {padding-left: 30%;} .news-container .postslist .maqalat-cont h4 { margin-top: 20px; } .news-container .h3home { margin-bottom: 26px; } .news-container .maqalat-cont a { left: 36px; } /* Footer */ .footer-wrapper { display: block; background: #27b9d1; padding: 30px 0; } .copyright-wrapper { display: block; overflow: hidden; text-align: center; background: #ffffff; padding: 20px 0; color: #575756; font-size: 16px; } .copyright-wrapper a { color: #27b9d1; } .footer-right {display: flex;align-items: center;margin-left: 30px;border-left: 1px solid #fff;padding: 30px;padding-right: 0;} .footer-wrapper > .wrp { display: flex; align-items: center; } .footer-left ul li { list-style: none; } .footer-left ul li { display: block; text-align: center; } .footer-left ul li a { color: #fff; padding: 0 24px; line-height: 30px; font-size: 17px; border: 1px solid; border-radius: 30px; align-items: center; display: block; } .footer-left ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin: 0; padding: 0; } .footer-left { width: 34%; } .compare-triangle,.brands-triangle { } .comparison-container { position: fixed; left: 0; bottom: 0; z-index: 9; } .compare-square,.brands-square { display: flex; width: 86px; height: 56px; background: #dd348a; position: absolute; bottom: 128px; cursor: pointer; align-items: center; z-index: 11; border: 1px solid #f5f5f5; } .compare-square { left: 0; border-radius: 0 30px 30px 0; border-left: 0; } .compare-square svg { margin-right: 20px; } .brands-bottom-container { position: fixed; right: 0; bottom: 0; z-index: 9; } .brands-square { right: 0; border-radius: 30px 0 0 30px; justify-content: left; border-right: 0; } .brands-square svg {margin-left: 20px;} /* Single Posts */ .sinfo-top { display: block; background: #dd348a; border-radius: 30px; overflow: hidden; border: 1px solid #dd348a; position: relative; z-index: 1; } .single-phone-r { width: 34%; float: right; display: flex; padding: 30px; background: #ffffff; border-radius: 30px 0 0 100px / 30px 0 0 100px; border-left: 1px solid #dd348a; z-index: 1; border-top: 1px solid #dd348a; top: -1px; position: absolute; right: 0; bottom: 0; align-items: center; justify-content: center; } .single-phone-l { float: left; display: inline-block; width: 70%; position: relative; } .singlephonel-top { background: #ffffff; display: block; padding: 26px; position: relative; overflow: hidden; padding-right: 50px; border-radius: 40% 0 0 36px / 84% 0 0 36px; margin-left: 20px; } .final-takyeem { display: flex; float: left; background: #fff; border: 1px solid #dd348a; padding: 0 30px; border-radius: 30px; position: relative; overflow: hidden; padding-right: calc(5% + 16px); padding-left: 16px; height: 44px; align-items: center; justify-content: center; } ul.specs-tool { display: block; padding: 0 20px; margin: 0; margin-bottom: 20px; } .singlephonel-bottom ul li { display: block; text-align: center; color: inherit; transition: color .5s; } .singlephonel-bottom ul { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; } .singlephonel-bottom ul li:not(:last-child) { border-left: 1px solid #ffffff; } .singlephonel-bottom { display: block; color: #ffffff; padding: 20px; padding-right: 30px; padding-left: 0; } .final-takyeem:before { content: ''; position: absolute; right: 0; transform: translate(-50%, 0%) rotate(264deg); height: 58px; width: 50px; box-shadow: 0px 25px 0 10px #dd348a; border-radius: 50%; } .single-phone-info { display: block; margin: 20px; margin-bottom: -10px; } ul.specs-tool li { list-style: none; color: #575756; line-height: 24px; font-size: 14px; font-weight: 400; display: block; text-align: right; } .singlephonel-bottom ul li p.specs-num { margin: 0; font-weight: 900; font-size: 18px; display: block; line-height: 14px; } .singlephonel-bottom ul li span.specs-unit { margin: 0; font-weight: 100; font-size: 14px; } .singlephonel-bottom ul li svg { display: inline-block; } ul.specs-tool li svg { margin-left: 10px; display: inline-block; } span.specs-icon { display: inline-flex; width: 20px; height: 20px; position: relative; top: 2px; margin-left: 12px; } span.specs-icon svg { width: 100%; height: 100%; max-width: 100%; margin: 0!important; } ul.specs-tool li.screen-spc span.specs-icon { height: 22px; width: 22px; margin-left: 10px; } span.takyeem-num { font-weight: 100; font-size: 14px; display: inline-block; margin-left: 9px; } .unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating { background-size: auto 100%; } .unit-rating { width: 120px; height: 24px; color: transparent; font-size: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z' stroke='%23fabf2f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); list-style: none; margin: 0; padding: 0; position: relative; z-index: 1; display: inline-block; direction: ltr; transform: scaleX(-1); } .unit-rating li.current-rating { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fabf2f' d='M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z'/%3E%3C/svg%3E"); position: absolute; height: 100%; } .unit-rating, .unit-rating li a:hover, .unit-rating li.current-rating { background-size: auto 100%; } .unit-rating li { text-indent: -9000px; padding: 0; margin: 0; float: right; width: 20%; height: 100%; } .sinfo-bottom { display: block; overflow: hidden; background: #27b9d1; padding: 20px 20px; border-radius: 0 0 30px 30px; position: relative; top: -30px; padding-top: 50px; text-align: center; } .sinfo-bottom ul li { list-style: none; position: relative; overflow: hidden; } .sinfo-bottom ul { display: grid; grid-template-columns: repeat(3,1fr); padding: 0; margin: 0; } .sinfo-bottom ul li a { display: flex; color: #fff; border: 2px solid #fff; border-radius: 30px; font-size: 16px; padding: 12px 20px; line-height: 22px; justify-content: center; align-items: center; } .sinfo-bottom ul li.jumiabuy { margin-right: 6px; } .sinfo-bottom ul li.souqbuy { margin-left: 6px; } .sinfo-bottom ul li span { display: block; color: #fff; background: #dd348a; border-radius: 0 30px  30px  0; font-size: 16px; position: relative; padding: 14px 20px; line-height: 22px; } .sinfo-bottom ul li span:before { content: ""; top: 43%; left: 0px; position: absolute; transform: translate(-154%, -40%) rotate(193deg); height: 62px; width: 60px; box-shadow: -38px 11px 0 5px #27b9d1; border-radius: 50%; } .sinfo-bottom ul li.jumiabuy a { background: #f8b133; } .sinfo-bottom ul li.souqbuy a { background: #dd348a; } .sinfo-bottom ul li a svg { display: inline-block; margin-left: 2px; } .wasf-picinside { margin: 0 20px; overflow: hidden; display: block; position: relative; margin-bottom: 20px; } .wasf-picinside-r { float: right; width: 60%; background: #dd348a; color: #ffffff; padding: 40px; border-radius: 0 30px  30px 0; position: absolute; bottom: 0; top: 0; right: 0; } .wasf-picinside-l { float: left; width: 40%; padding: 30px 30px; border: 1px solid #d9d9d9; border-radius: 30px  0 0 30px; border-right: none; } .wasf-picinside-r span { display: block; border-bottom: 1px solid #ffffff; line-height: 27px; font-size: 18px; font-weight: 400; padding-bottom: 6px; } .wasf-picinside-r p { font-weight: 100; font-size: 14px; line-height: 24px; } .wasf-picinside-l ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; margin: 0; padding: 0; } .wasf-picinside-l ul li img { max-width: 100%; cursor: pointer; width: 100%; height: 90px; object-fit: contain; display: block; } .wasf-picinside-l ul li { list-style: none; overflow: hidden; border-radius: 14px; } .wasf-picinside-l span { display: block; text-align: center; color: #575756; font-size: 18px; line-height: 26px; margin-bottom: 14px; } .reviewsection-desc { display: block; overflow: hidden; margin: 0 20px; border: 1px solid #d9d9d9; padding: 30px; border-radius: 30px; position: relative; max-height: 400px; margin-bottom: 20px; line-height: 28px; } .reviewsection-desc p { margin: 0; } .inside-reviewsection .h3home:not(table .h3home) { margin-bottom: 20px; text-align: center; background: #27b9d1; } .reviewsection-btn { position: absolute; bottom: 0; right: 0; left: 0; text-align: center; padding: 34px 0; background: linear-gradient(0deg,rgb(255 255 255 / 80%) 60%,transparent 100%); z-index: 1; } .reviewsection-btn button { background: #dd348a; border: 0; outline: none; cursor: pointer; font-family: inherit; color: #ffffff; padding: 12px 40px; border-radius: 30px 30px 20px 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 18px; } .reviewsection-btn button svg { display: inline-block; margin-left: 6px; } ul.momyzt-3yoob-specs { margin: 0 20px; border: 1px solid #d9d9d9; padding: 14px 20px; border-radius: 30px; margin-bottom: 20px; } ul.momyzt-3yoob-specs li { display: block; list-style: none; padding-right: 30px; line-height: 30px; padding-bottom: 4px; font-size: 14px; background-repeat: no-repeat; background-size: 16px; background-position: center right 6px; } ul.momyzt-3yoob-specs li:not(:last-child) { border-bottom: 1px solid #d9d9d9; } ul.momyzt-3yoob-specs.momyizat li { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2326B9D1;%7D%0A%3C/style%3E%3Cpath class='st0' d='M80.6,167.5c-4.8,0-9.3-2.1-12.3-5.8l-42.4-51c-5.7-6.8-4.7-16.9,2.1-22.6c6.8-5.7,16.9-4.7,22.6,2.1l29.9,36 l70-86.8c5.6-6.9,15.6-8,22.5-2.4c6.9,5.6,8,15.7,2.4,22.5l-82.2,102c-3,3.7-7.6,5.9-12.4,6C80.7,167.5,80.6,167.5,80.6,167.5z'/%3E%3C/svg%3E%0A"); } ul.momyzt-3yoob-specs.eyoob li { background-image: url("data:image/svg+xml,%0A%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23E0358B;%7D%0A%3C/style%3E%3Cpath class='st0' d='M48.2,35.7c8.1-7,15.7-6.5,23,1.6L99.9,74l28.9-36.8c7.3-8.1,14.9-8.6,22.8-1.6c7.9,7.1,8.2,14.6,1.1,22.7 l-32.5,41.4l32.6,41.5c7,8.1,6.6,15.7-1.1,23c-8.1,7-15.6,6.5-22.7-1.5l-29.2-37.2l-29.2,37.2c-7,8-14.5,8.5-22.6,1.5 c-7.7-7.3-8.1-14.9-1.1-23l32.6-41.5L47.3,58.4C40.1,50.2,40.4,42.7,48.2,35.7z'/%3E%3C/svg%3E%0A"); } .momyizat-basic table  { width: 100%; font-size: 14px; border-collapse: collapse; } .momyizat-basic .h3home,.insidec-container .h3home { text-align: center; background: #27b9d1; } .momyizat-basic td.tableRight { width: 35%; } .momyizat-basic td { padding: 16px 20px; font-weight: 400; color: #575756; } .momyizat-basic table tr:nth-child(even) { background-color: #f5f5f5; } .maqalatcontainer h2:after { max-width: 80%; } .insidebuy-links ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .insidebuy-links a { display: block; background: #dd348a; border-radius: 30px; padding: 6px; color: #fff; margin-bottom: 10px; overflow: hidden; line-height: 38px; } .insidebuy-links { display: block; overflow: hidden; margin: 20px 0; } .insidebuy-links a .insidebuy-icon { display: flex; width: 40px; height: 40px; background: #ffffff; text-align: center; align-items: center; justify-content: center; border-radius: 30px; float: right; margin-left: 14px; margin-right: 2px; } .insidebuy-links a span { float: left; color: #575756; background: #ffffff; border-radius: 30px; position: relative; margin-left: 2px; font-size: 15px; display: flex; padding: 6px; } .insidebuy-links ul a { margin-bottom: 0; } .insidebuy-links a.currentphonecompare span { padding: 0 26px; line-height: 30px; margin-top: 5px; left: 5px; } .insidebuy-links a.currentphonecompare { background: #575756; margin-top: 10px; margin-bottom: 0; } .inside-reviewsection { display: block; position: relative; } .compareinside-fa { display: block; overflow: hidden; } .one-mobile { display: grid; grid-template-columns: 1fr 0 1fr; border-bottom: 0; justify-content: center; text-align: center; position: relative; overflow: hidden; } .mobiles-list { margin: 20px; display: block; overflow: hidden; } span.imghalf-container { display: block; height: 110px; overflow: hidden; text-align: center; } span.imghalf-container img { width: auto; height: 100%; max-width: 100%; display: inline-block; margin: 0 auto; } .imghalf-content { display: block; text-align: center; overflow: hidden; border-radius: 0 0 0 40px; position: relative; } .first .imghalf-content { border-radius: 0 0 30px 0; } .imghalf-content span { display: block; font-size: 14px; padding: 14px 8px; line-height: 10px; position: relative; } .imghalf-content span:nth-child(2) { background: #d9d9d9; } .imghalf-content span:first-child { background: #ececec; overflow: hidden; max-height: 50px; line-height: 28px; } .first .imghalf-content span:first-child:after { content:''; display: inline-block; position: absolute; width: 1px; height: 20px; background: #d9d9d9; left: 0; top: 26px; } .first .imghalf-content span:nth-child(2):after { content: ''; display: inline-block; position: absolute; width: 1px; height: 20px; background: #ececec; left: 0; } .halfmobile-con { border: 1px solid #ececec; padding: 30px 0; border-radius: 30px  30px  0 0; border-bottom: 0; position: relative; padding-bottom: 80px; overflow: hidden; text-align: center; } .halfmobile.first .halfmobile-con { border-left: 0; border-radius: 0 30px 0 0; } .halfmobile:not(.first) .halfmobile-con { border-right: 0; border-radius: 30px 0 0 0; } span.imghalf-cat { position: absolute; bottom: 0; right: 0; width: 70px; height: 56px; margin: 0 auto; left: 0; background: #ececec; display: inline-block; border-radius: 50% 50% 0 0; padding: 0 10px; } span.imghalf-cat img { max-width: 90%; height: auto; margin-top: 6px; } .halfmobile.first .halfmobile-con:after,.single-mobiles-list .halfmobile-con:before { content: ''; right: 0px; position: absolute; transform: translate(2px, 1px) rotate(193deg); height: 120px; width: 108px; box-shadow: -75px -50px 0 12px #ececec; border-radius: 50%; bottom: 0; } .halfmobile:not(.first) .halfmobile-con:after,.single-mobiles-list .halfmobile-con:after { content: ''; left: 0px; position: absolute; transform: translate(0px, 1px) rotate(-193deg); height: 120px; width: 108px; box-shadow: 75px -50px 0 12px #ececec; border-radius: 50%; bottom: 0; } .box-versus { position: relative; display: block; top: 90px; text-align: center; right: -18px; width: 30px; height: 30px; } .box-versus div { display: inline-block; width: 36px; height: 36px; text-align: center; border: 1px solid; border-radius: 30px; color: #27b9d1; line-height: 36px; font-size: 14px; text-transform: uppercase; } .single-one-mobile a,.halfmobile a { color: inherit; text-decoration: none!important; } .one-mobile a:after,.single-one-mobile a:after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 9; } /* Swipper */ .swiper{margin-left:auto;margin-right:auto;/* position:relative; */overflow:hidden;list-style:none;padding:0;z-index:1} .swiper-vertical>.swiper-wrapper{ flex-direction:column } .swiper-wrapper{ position:relative; width:100%; height:100%; z-index:1; display:flex; transition-property:transform; box-sizing:content-box } .swiper-android .swiper-slide,.swiper-wrapper{ transform:translate3d(0px,0,0) } .swiper-pointer-events{ touch-action:pan-y } .swiper-pointer-events.swiper-vertical{ touch-action:pan-x } .swiper-slide{ flex-shrink:0; width:100%; height:100%; position:relative; transition-property:transform } .swiper-slide-invisible-blank{ visibility:hidden } .swiper-autoheight,.swiper-autoheight .swiper-slide{ height:auto } .swiper-autoheight .swiper-wrapper{ align-items:flex-start; transition-property:transform,height } .swiper-backface-hidden .swiper-slide{ transform:translateZ(0); -webkit-backface-visibility:hidden; backface-visibility:hidden } .swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{ perspective:1200px } .swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{ transform-style:preserve-3d } .swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:10 } .swiper-3d .swiper-slide-shadow{ background:rgba(0,0,0,.15) } .swiper-3d .swiper-slide-shadow-left{ background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-right{ background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-top{ background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-3d .swiper-slide-shadow-bottom{ background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0)) } .swiper-css-mode>.swiper-wrapper{ overflow:auto; scrollbar-width:none; -ms-overflow-style:none } .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{ display:none } .swiper-css-mode>.swiper-wrapper>.swiper-slide{ scroll-snap-align:start start } .swiper-horizontal.swiper-css-mode>.swiper-wrapper{ scroll-snap-type:x mandatory } .swiper-vertical.swiper-css-mode>.swiper-wrapper{ scroll-snap-type:y mandatory } .swiper-centered>.swiper-wrapper::before{ content:''; flex-shrink:0; order:9999 } .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{ margin-inline-start:var(--swiper-centered-offset-before) } .swiper-centered.swiper-horizontal>.swiper-wrapper::before{ height:100%; min-height:1px; width:var(--swiper-centered-offset-after) } .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{ margin-block-start:var(--swiper-centered-offset-before) } .swiper-centered.swiper-vertical>.swiper-wrapper::before{ width:100%; min-width:1px; height:var(--swiper-centered-offset-after) } .swiper-centered>.swiper-wrapper>.swiper-slide{ scroll-snap-align:center center } .swiper-virtual .swiper-slide{ -webkit-backface-visibility:hidden; transform:translateZ(0) } .swiper-virtual.swiper-css-mode .swiper-wrapper::after{ content:''; position:absolute; left:0; top:0; pointer-events:none } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{ height:1px; width:var(--swiper-virtual-size) } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{ width:1px; height:var(--swiper-virtual-size) } .swiper-button-next,.swiper-button-next:after,.swiper-button-lock{ display:none } .swiper-scrollbar{ border-radius:10px; position:relative; -ms-touch-action:none; background:rgba(0,0,0,.1) } .swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{ display:none!important } .swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{ position:absolute; left:1%; bottom:3px; z-index:50; height:5px; width:98% } .swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{ position:absolute; right:3px; top:1%; z-index:50; width:5px; height:98% } .swiper-scrollbar-drag{ height:100%; width:100%; position:relative; background:rgba(0,0,0,.5); border-radius:10px; left:0; top:0 } .swiper-scrollbar-cursor-drag{ cursor:move } .swiper-scrollbar-lock{ display:none } .swiper-zoom-container{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; text-align:center } .swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{ max-width:100%; max-height:100%; object-fit:contain } .swiper-slide-zoomed{ cursor:move } .swiper-lazy-preloader{ width:42px; height:42px; position:absolute; left:50%; top:50%; margin-left:-21px; margin-top:-21px; z-index:10; transform-origin:50%; box-sizing:border-box; border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color)); border-radius:50%; border-top-color:transparent } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{ animation:swiper-preloader-spin 1s infinite linear } .swiper-lazy-preloader-white{ --swiper-preloader-color:#fff } .swiper-lazy-preloader-black{ --swiper-preloader-color:#000 } @keyframes swiper-preloader-spin{ 0%{ transform:rotate(0deg) } 100%{ transform:rotate(360deg) } } .swiper .swiper-notification{ position:absolute; left:0; top:0; pointer-events:none; opacity:0; z-index:-1000 } .swiper-free-mode>.swiper-wrapper{ transition-timing-function:ease-out; margin:0 auto } .swiper-grid>.swiper-wrapper{ flex-wrap:wrap } .swiper-grid-column>.swiper-wrapper{ flex-wrap:wrap; flex-direction:column } .swiper-fade.swiper-free-mode .swiper-slide{ transition-timing-function:ease-out } .swiper-fade .swiper-slide{ pointer-events:none; transition-property:opacity } .swiper-fade .swiper-slide .swiper-slide{ pointer-events:none } .swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{ pointer-events:auto } .swiper-cube{ overflow:visible } .swiper-cube .swiper-slide{ pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden; z-index:1; visibility:hidden; transform-origin:0 0; width:100%; height:100% } .swiper-cube .swiper-slide .swiper-slide{ pointer-events:none } .swiper-cube.swiper-rtl .swiper-slide{ transform-origin:100% 0 } .swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{ pointer-events:auto } .swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{ z-index:0; -webkit-backface-visibility:hidden; backface-visibility:hidden } .swiper-cube .swiper-cube-shadow{ position:absolute; left:0; bottom:0px; width:100%; height:100%; opacity:.6; z-index:0 } .swiper-cube .swiper-cube-shadow:before{ content:''; background:#000; position:absolute; left:0; top:0; bottom:0; right:0; filter:blur(50px) } .swiper-flip{ overflow:visible } .swiper-flip .swiper-slide{ pointer-events:none; -webkit-backface-visibility:hidden; backface-visibility:hidden; z-index:1 } .swiper-flip .swiper-slide .swiper-slide{ pointer-events:none } .swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{ pointer-events:auto } .swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{ z-index:0; -webkit-backface-visibility:hidden; backface-visibility:hidden } .swiper-creative .swiper-slide{ -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden; transition-property:transform,opacity,height } .swiper-cards{ overflow:visible } .swiper-cards .swiper-slide{ transform-origin:center bottom; -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden } .swiper-btn-next,.swiper-btn-prev { background: #dd348a; z-index: 2; width: 36px; text-align: center; line-height: 42px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-block; } span.swipertop { display: block; overflow: hidden; clear: both; } .swiper-btn-next {margin-right: 4px;} .swiper-arrows { z-index: 1; float: left; display: block; } .swipertop  p { font-size: 16px; margin: 0; display: block; margin-bottom: 14px; line-height: 34px; } .single-one-mobile { position: relative; overflow: hidden; display: block; } .single-one-mobile .imghalf-content { border-radius: 0 0 40px 40px; } .single-mobiles-list { display: block; overflow: hidden; margin: 30px 60px; } .single-phonextb { position: absolute; right: 0; top: 0; width: 3rem; height: 100%; border: 0 none; background: 0 0; padding: 0; } .mobiles-monafis { position: relative; } .single-phoprevb { position: absolute; left: 0; top: 0; width: 3rem; height: 100%; border: 0 none; background: 0 0; padding: 0; } .single-phoprevb span { position: absolute; top: calc(50% + 50px); left: 0; z-index: 9; display: block; margin-top: -1.5rem; margin-left: 10px; } .single-phonextb span { position: absolute; top: calc(50% + 50px); left: 0; z-index: 9; display: block; margin-top: -1.5rem; margin-right: 10px; } .single-phoprevb:after { content: ''; width: 1px; height: 160px; background: #ececec; display: inline-block; position: absolute; left: 27px; top: calc(50% - 40px); } .single-phonextb:after { content: ''; width: 1px; height: 160px; background: #ececec; display: inline-block; position: absolute; right: 27px; top: calc(50% - 40px); } div#sameprice .single-mobiles-list { margin-bottom: 0; } .new-mobiles-container { display: block; overflow: hidden; margin: 20px; } .new-mbselect select { color: #ffffff; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff); background-position: 17px 22px, 22px 22px, 38px; background-size: 5px 5px, 5px 5px, 1px 22px; background-repeat: no-repeat; padding: 14px 20px 14px 50px; background-color: #dd348a; border-radius: 30px; font-size: 14px; } .new-mobiles-p { display: grid; gap:10px; grid-template-columns: repeat(2,1fr); } .resultnum,.new-mbselect > span { background: #ececec; border-radius: 30px; padding: 0; color: #585856; text-align: center; line-height: 48px; height: 50px; display: block; } .new-mbselect > span { float: right; padding-left: 40px; } .new-mbselect > span,.new-mbselect > select { width: 70%; display: inline-block; } .new-mbselect > select { position: absolute; left: 0; width: calc(46%); } .new-mbselect { display: block; position: relative; overflow: hidden; } .newone-mobile { display: block; border: 1px solid #d9d9d9; border-radius: 16px; padding: 10px; overflow: hidden; position: relative; } .phoneavailability { display: inline-block; background: #dd348a; color: #fff; padding: 6px 22px; border-radius: 30px; font-size: 12px; } .newone-img { display: block; overflow: hidden; margin: 16px 0; text-align: center; height: 120px; } .newone-img img { margin: auto; width: auto; height: 100%; max-width: 100%; } .newone-mobile .title { display: block; text-align: center; font-size: 16px; color: #575756; font-weight: 400; line-height: 30px; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } span.newone-price { display: inline-block; background: #dd348a; color: #fff; padding: 6px 18px; border-radius: 30px; font-size: 12px; float: left; } .new-mobiles-list { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 14px 0; } .phoneavailability.green,.motawafir.green span { background: #2eab66!important; } .phoneavailability.yellow,.motawafir.yellow span { background: #f8b133!important; } .phoneavailability.grey,.motawafir.grey span { background: #ececec!important; color:#575756!important; } .newone-img a { color: inherit; text-decoration: none!important; } .newone-img a:after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; z-index: 2; } .search-modal { background: #27b9d1; padding: 16px 20px; overflow: hidden; border-radius: 30px; margin: 0 20px; margin-top: 14px; color: #fff; font-size: 16px; line-height: 40px; text-align: center; } .search-modal input[type=number] { background-color: #cafeff; color: #27b9d1; outline: none; border: none; font-size: 14px; line-height: 30px; border-radius: 30px; width: 100px; padding: 0 10px; font-family: 'Noor',sans-serif; margin: 0 8px; } .search-modal input#cam,.search-modal input#battery { width: 120px; } .search-modal input[type=number]::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #27b9d1; } .search-modal input[type=number]::-moz-placeholder { /* Firefox 19+ */ color: #27b9d1; } .search-modal input[type=number]:-ms-input-placeholder { /* IE 10+ */ color: #27b9d1; } .search-modal input[type=number]:-moz-placeholder { /* Firefox 18- */ color: #27b9d1; } .search-modal input[type=submit] { width: auto; display: inline-block; margin: 0; padding: 0 22px; height: 30px; top: 1px; position: relative; }.searchcontainer .new-mobiles-container { margin-top: 14px; } input.mobile-price-filter { outline: none; color: #575756; background: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cpath fill='%23dd348a' d='M163.8,78.14c0-35.78-29-64.78-64.78-64.78s-64.78,29-64.78,64.78s29,64.78,64.78,64.78 S163.8,113.92,163.8,78.14z M99.02,129.23c-28.17,0-51.09-22.92-51.09-51.09s22.92-51.09,51.09-51.09s51.09,22.92,51.09,51.09 S127.19,129.23,99.02,129.23z'/%3E%3Crect x='138.43' y='130.61' fill='%23dd348a' transform='matrix(0.8561 -0.5169 0.5169 0.8561 -61.2163 97.9616)' width='13.69' height='56.56'/%3E%3C/svg%3E%0A"); text-decoration: none; font-family: inherit; background-repeat: no-repeat; background-size: 24px; background-position: center right 20px; font-size: 16px; display: block; margin: 12px 20px; line-height: 20px; border-radius: 30px; padding: 12px 20px; border: 1px solid #dd348a; width: calc(100% - 40px); margin-bottom: 0; text-indent: 30px; } .boursacontainer .new-mobiles-container > h2{ display: block; font-size: 16px; line-height: 30px; font-weight: 500; border-bottom: 1px solid #de348a; position: relative; } input[name=compare] { text-decoration: none; background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 200 200' style='enable-background:new 0 0 200 200;' xml:space='preserve'%3E%3Cpath fill='%23ffffff' d='M163.8,78.14c0-35.78-29-64.78-64.78-64.78s-64.78,29-64.78,64.78s29,64.78,64.78,64.78 S163.8,113.92,163.8,78.14z M99.02,129.23c-28.17,0-51.09-22.92-51.09-51.09s22.92-51.09,51.09-51.09s51.09,22.92,51.09,51.09 S127.19,129.23,99.02,129.23z'/%3E%3Crect x='138.43' y='130.61' fill='%23ffffff' transform='matrix(0.8561 -0.5169 0.5169 0.8561 -61.2163 97.9616)' width='13.69' height='56.56'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 22px; background-position: right calc(50% + -22px) center; padding-left: 6px; margin: 0; } .compare-2-mobiles { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; position: relative; overflow: hidden; margin-bottom: 30px; } .compare-2-container { display: block; overflow: hidden; margin: 30px 20px; } .compare-2-mobiles >div { position: relative; } .compare-2-mobiles >div.comp1:after { width: 1px; height: 100%; background: #ededed; display: block; content: ''; position: absolute; left: -15px; bottom: 0; } #mobile-e5tyrak select,.compare-2-mobiles select { color: #575756; background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff); background-position: 17px 22px, 22px 22px, 38px; background-size: 5px 5px, 5px 5px, 1px 22px; background-repeat: no-repeat; padding: 14px 20px 14px 50px; background-color: #ececec; border-radius: 30px; font-size: 14px; } .compare-2-mobiles .brand-select-2, .compare-2-mobiles .brand-select,#mobile-e5tyrak .brand-select,#mobile-e5tyrak .mobile-select { margin-bottom: 15px; } .compare-2-mobiles h3,div#mobile-e5tyrak h3 { display: block; margin-bottom: 20px; font-size: 16px; font-weight: 400; padding: 0 14px; } .boursacontainer .new-mobiles-container  .new-mobiles-list { margin-bottom: 26px; } #mobile-e5tyrak, #mobilesList2 { display: none; } div#mobile-e5tyrak { text-align: center; margin: 30px auto; max-width: 50%; overflow: hidden; margin-bottom: 0; } .tabs button { width: 100%; outline: none; border: 1px solid #dd348a; font-family: 'Noor',sans-serif; padding: 7px 0; font-size: 16px; cursor: pointer; color: #575756; background: #ffffff; border-radius: 30px; transition: 0.2s; } .tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; overflow: hidden; } .tabs button.active { background: #dd348a; color: #fff; } .phones2com-top { display: grid; overflow: hidden; padding: 20px; grid-template-columns: repeat(2,1fr); gap: 20px; } .phoneschild2-top { display: block; padding: 20px; border: 1px solid #d9d9d9; border-radius: 30px; overflow: hidden; } img.mob-main-img { margin: 10px auto; display: block; height: 200px; width: auto; } .phoneschild2img { text-align: center; display: block; padding: 0; margin: 30px auto; margin-bottom: 0; overflow: hidden; height: 200px; } span.child2price { display: inline-block; border: 1px solid #d9d9d9; color: #575756; padding: 8px 22px; border-radius: 30px; font-size: 14px; float: left; } div#mobile_1_name,div#mobile_2_name { text-align: center; display: block; margin: 10px 0; font-size: 20px; overflow: hidden; } span.child2rating { float: right; text-align: center; line-height: 16px; } .child2top-ratingprice { display: block; overflow: hidden; position: relative; } span.child2rating p { margin: 0; font-size: 13px; font-weight: 100; } span.child2rating ul.unit-rating { width: 100px; height: 20px; } div#mobile_1_name a,div#mobile_2_name a { color: #575756; display: block; height: 28px; overflow: hidden; font-size: 18px; } input.compare-input { font-family: 'Noor',sans-serif; display: none; width: 100%; margin: 0 auto; border: none; outline: none; border-bottom: solid 1px #ececec; background-color: transparent; font-size: 15px; text-align: center; line-height: 46px; } .cool-Comparison ul.mobiles-list { position: absolute; display: none; overflow: auto; max-height: 200px; list-style: none; padding: 0; z-index: 9; margin: 0 auto; border-right: solid 1px #d9d9d9; border-left: solid 1px #d9d9d9; border-bottom: solid 1px #d9d9d9; background-color: #fff; border-radius: 0 0 20px 20px; } .cool-Comparison { margin: 19px auto; display: block; text-align: center; } .cool-Comparison ul.mobiles-list li { display: block; } .cool-Comparison ul.mobiles-list li a { border-bottom: solid 1px #d9d9d9; display: block; font-size: 14px; padding: 6px 10px; color: #575756; } .cool-Comparison ul.mobiles-list li:last-child a { border: 0; } .edit-pen { display: inline-block; width: 26px; height: 26px; cursor: pointer; top: 2px; position: relative; } .phones2com-top .insidebuy-links,.phones2com-top .insidebuy-links a:last-child { margin-bottom: 0; } h2.h3home.mmzyatttl { display: grid; grid-template-columns: repeat(2,1fr); padding: 0 30px; font-size: 16px; align-items: normal; line-height: 48px; } h2.h3home.mmzyatttl > span:last-child {text-align: left;} h2.h3home.mmzyatttl span:first-child { text-align: right; } h2.h3home.mmzyatttl span { display: block; } .mmzyatttl.h3home svg { display: inline-block; position: relative; top: 4px; } .inside2comeyobmm .h3home { margin-bottom: 20px; text-align: center; background: #27b9d1; } .inside2com-eyobmm { display: grid; grid-template-columns: repeat(2,1fr); overflow: hidden; position: relative; border: 1px solid #d9d9d9; border-radius: 30px; padding: 4px 20px; } .inside2com-eyobmm ul.momyzt-3yoob-specs { margin: 0; border: 0; border-radius: 0; padding: 0; } .inside2com-eyobmm ul.momyzt-3yoob-specs li {padding: 4px 30px;padding-left: 10px;} .inside2com-eyobmm:after { content: ''; width: 1px; background: #d9d9d9; display: inline-block; position: absolute; left: 50%; top: 0; bottom: 0; } .inside2com-eyobmm ul.momyzt-3yoob-specs:nth-child(2) li { padding: 4px 40px; padding-left: 0; background-position: center right 14px; } .inside2comeyobmm { display: block; margin-bottom: 20px; overflow: hidden; } .inside2comeyobmm .mb { margin-bottom: 20px; } td.compare-td { width: 40%; word-break: break-word; overflow-wrap: anywhere; } td.tableRightCompare,td.tableRight { font-weight: 700; } .phones2combtm-con { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } .phones2com-btm .insidebuy-links a.currentphonecompare { margin-top: 0; margin-bottom: 0; } .phones2combtm-con .insidebuy-links { margin-bottom: 0; } .reviewsection-desc.active { max-height: 100%; overflow: unset; padding-bottom: 100px; padding-top: 29.5px; } .reviewsection-btn.active { position: sticky; top: calc(98vh - 80px); bottom: unset; margin-bottom: -100px; padding: 26px 0; } .main-container:after,.inside-reviewsection:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .reviewsection-insidedesc img,.pagecontent-p img { max-width: 95%; height: auto; display: block; margin: 20px auto; } .reviewsection-desc.active .reviewsection-insidedesc { display: block; position: relative; top: 3px; } .phoneschild2img img { margin: 10px auto; display: block; height: 90%; width: auto; } .note { display: block; margin: 10px auto; text-align: center; margin-top: 0; border: 1px solid; border-radius: 30px; padding: 14px; } .note p { margin: 0; } div.note.normal{color:#007300;background-color:#abf0ab;border-color:#2ecc40}div.note.warn{color:#fff;background-color:#ee9996;border-color:#ff6e6e}div.note.info{color:#222833;background-color:#e6e6e6;border-color:#acacac} span.compareinsidelop { position: absolute; z-index: 9999; top: 10px; right: -48px; transition: 0.3s; } span.compareinsidelop a { background: #27b9d1; color: #fff; padding: 0; border-radius: 30px; width: 48px; display: flex; line-height: 48px; text-align: center; justify-content: center; align-items: center; height: 48px; } span.compareinsidelop a:after { display: none; } /* Comments */ div#respond { position: relative; overflow: hidden; display: block; padding: 20px; border: 1px solid #d9d9d9; margin: 20px 0; border-radius: 30px; } .comment-form { padding-right: 80px; position: relative; } span.usrimg { position: absolute; top: 0; right: 0; width: 60px; height: 60px; border-radius: 100%; overflow: hidden; } .comment-form textarea { min-height: 120px; height: 120px; max-height: 200px; transition: none; min-width: 100%; max-width: 100%; line-height: 1.5; margin-top: 10px; } .comment-form textarea, .comment-form-input { border: 0; box-shadow: none; border-bottom: 1px solid #f2f4f8; font-size: 15px; outline: none; font-family: 'Noor',sans-serif; } .insidec-container button { background: #dd348a; float: left; font-family: 'Noor',sans-serif; display: inline-block; padding: 12px 20px; color: #fff; border-radius: 30px; line-height: 1; font-size: 14px; outline: none; border: 0; cursor: pointer; } div#ComStars { float: right; position: relative; } .hide { display: none!important; } #ComStars label { float: left; cursor: pointer; } #ComStars .star { height: 25px; width: 25px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNy4xMDUiIGhlaWdodD0iMjcuMTA1IiB2aWV3Qm94PSIwIDAgMjcuMTA1IDI3LjEwNSI+PGcgb3BhY2l0eT0iMC4yIj48cGF0aCBkPSJNMjcuMSwwSDBWMjcuMUgyNy4xWiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yNy4xLDBIMFYyNy4xSDI3LjFaIiBmaWxsPSJub25lIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4yNTkgMi4yNTkpIj48cGF0aCBkPSJNMTMuMjk0LDE5LjI0NSw2LjMxNCwyMy40NThsMS44NTItNy45MzlMMiwxMC4xNzdsOC4xMi0uNjg5TDEzLjI5NCwybDMuMTc0LDcuNDg4LDguMTIuNjg5LTYuMTY2LDUuMzQyLDEuODUyLDcuOTM5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIgLTIpIiBmaWxsPSIjMWY0MTczIi8+PC9nPjwvZz48L3N2Zz4=); background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; display: inline-block; } #ComStars:not(:checked)>label:hover>span, #ComStars:not(:checked)>label:hover~label>span, #ComStars>input:checked~label>span, .star.active { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNy4xMDUiIGhlaWdodD0iMjcuMTA1IiB2aWV3Qm94PSIwIDAgMjcuMTA1IDI3LjEwNSI+PHBhdGggZD0iTTI3LjEsMEgwVjI3LjFIMjcuMVoiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMjcuMSwwSDBWMjcuMUgyNy4xWiIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIuMjU5IDIuMjU5KSI+PHBhdGggZD0iTTEzLjI5NCwxOS4yNDUsNi4zMTQsMjMuNDU4bDEuODUyLTcuOTM5TDIsMTAuMTc3bDguMTItLjY4OUwxMy4yOTQsMmwzLjE3NCw3LjQ4OCw4LjEyLjY4OS02LjE2Niw1LjM0MiwxLjg1Miw3LjkzOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yIC0yKSIgZmlsbD0iI2ZkYjkwMCIvPjwvZz48L3N2Zz4=); } .star { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNy4xMDUiIGhlaWdodD0iMjcuMTA1IiB2aWV3Qm94PSIwIDAgMjcuMTA1IDI3LjEwNSI+PGcgb3BhY2l0eT0iMC4yIj48cGF0aCBkPSJNMjcuMSwwSDBWMjcuMUgyNy4xWiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0yNy4xLDBIMFYyNy4xSDI3LjFaIiBmaWxsPSJub25lIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMi4yNTkgMi4yNTkpIj48cGF0aCBkPSJNMTMuMjk0LDE5LjI0NSw2LjMxNCwyMy40NThsMS44NTItNy45MzlMMiwxMC4xNzdsOC4xMi0uNjg5TDEzLjI5NCwybDMuMTc0LDcuNDg4LDguMTIuNjg5LTYuMTY2LDUuMzQyLDEuODUyLDcuOTM5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIgLTIpIiBmaWxsPSIjMWY0MTczIi8+PC9nPjwvZz48L3N2Zz4=); background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; } .comment-form-input{width:100%;margin-bottom:4px;height:40px;line-height:40px;border-radius:0} div#respond > small { display: none!important; } #CommentsWarp .comment-warp {border-bottom: 1px solid #d9d9d9;margin-bottom: 20px;padding: 20px;padding-top: 0;} .cmnt { padding: 0 80px 0 0; position:relative; } .comwp .rating { margin-top: 8px; display: block; overflow: hidden; } .cmnt>p { line-height: 1.7; font-size: 16px; color: #585856; font-weight: 400; margin: 0; margin-top: 10px; display: block; } .com1, .com1>*, .com1>img, .star { height: 25px; }.cmnt .rating .star { width: 15px; height: 15px; background-size: 18px 18px; display: inline-block; } .com1>b { font-size: 18px; font-weight: 600; color: #575756; } .com1>* { float: right; line-height: 25px; } .com1 svg { padding-right: 10px; } .com1>time { font-size: 12px; padding-right: 10px; color: #6e83a3; } div#CommentsWarp { position: relative; overflow: hidden; display: block; background: #eee; padding: 20px; margin: 20px 0; border-radius: 30px; } #CommentsWarp .comment-warp:last-child { padding-bottom: 0; margin-bottom: 0; border: 0; }div#load-more-comment { display: block; text-align:center; cursor:pointer; background: #dd348a; color:#fff; padding: 10px 10px; border-radius: 30px; font-size: 14px; margin-bottom: 20px; } .modal { display: none; position: fixed; z-index: 11; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: #000; } .cursor { cursor: pointer; } .close { direction: rtl; color: #fff; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: 700; } .modal-content { position: relative; margin: auto; padding: 0; max-width: 90%; }.mySlides { display: none; } .prev, .next { background: #27b9d1; cursor: pointer; position: absolute; top: 50%; width: 50px; height: 50px; padding: 0; line-height: 48px; margin-top: -50px; color: #fff; font-weight: 700; font-size: 20px; left: 0; transition: .6s ease; border-radius: 50%; user-select: none; -webkit-user-select: none; display: inline-block; text-align: center; } .next { right: 0; left: initial; } .modal-image { display: block; margin: auto; width: 800px; max-width: 100%; height: 800px; max-height: 70vh; object-fit: contain; } .numbertext { color: #f2f2f2; font-size: 16px; font-weight: 700; text-align: left; } .prev:hover, .next:hover { text-decoration: none; background: #1a92a5; } .ma3ak-kam-menu-before:after { content: ''; display: block; position: absolute; left: 3px; top: 0; bottom: 0; background: #d9d9d9; z-index: 1; width: 1px; } .ma3ak-kam-menu-before { display: block; position: relative; } .home-middle ul li:last-child a { border: 0; } ul.ma3ak-kam-menu::-webkit-scrollbar { width: 10px; background-color: #d9d9d9; border-radius: 30px; } ul.ma3ak-kam-menu::-webkit-scrollbar-thumb { border-radius: 30px; background: #32b7d1; cursor: pointer; } ul.ma3ak-kam-menu::-webkit-scrollbar-track { background-color: #d9d9d9; border-radius: 30px; } .single-one-mobile:hover span.compareinsidelop { right: 10px; } span.compareinsidelop:before,.addcompare:before { content: attr(data-text); position:absolute; top:50%; right: 90%; margin-right: 6px; width: 60px; padding: 0; border-radius: 10px; background: #575756; color: #fff; line-height: 26px; text-align:center; font-size: 14px; opacity: 0; pointer-events: none; transform: translate3d(50%,0,0) translateY(-50%); transition: all .15s ease-in-out; } span.compareinsidelop:after,.addcompare:after {border-right: 6px solid #575756;border-top: 6px solid transparent;border-left: 6px solid transparent;content: '';height: 0;top: 15px;right: 90%;position: absolute;pointer-events: none;opacity: 0;display: block;transform: translate3d(50%,0,0) rotate(-45deg);transition: all .15s ease-in-out;} span.compareinsidelop:hover:before,.addcompare:hover:before { opacity: 1; transform: translate3d(-4px,0,0) translateY(-50%); } span.compareinsidelop:hover:after,.addcompare:hover:after { opacity: 1; transform: translate3d(-6.5px,0,0) rotate(-45deg); } .sidebar .search_result {display: none;position: absolute;top: calc(100% - 14px);right: 20px;left: 20px;z-index: 39;background: #fff;border: 1px solid #d9d9d9;margin: 0;padding: 0;border-radius: 10px;} .aps-search-field { position: relative; padding: 20px; display: block; } .aps-search-field input { width: 100%; height: 38px; max-height: 38px; border: 1px solid #d9d9d9; border-radius: 30px; outline: none; text-indent: 12px; font-family: 'Noor',sans-serif; } span.sidebar-icon-search { padding: 0; line-height: 1; position: absolute; top: 20px; left: 20px; } span.sidebar-icon-search button { border: 0; outline: none; color: #ffffff; height: 38px; background: #dd348a; display: block; cursor: pointer; font-family: 'Noor',sans-serif; padding: 0 20px; border-radius: 30px; } .sidebar .search_result li { float: right; width: 100%; color: #8d8d8d; padding: 10px; font-size: 14px; border-bottom: 1px solid #d9d9d9; } .aps-res-thumb { float: right; margin-left: 10px; max-width: 80px; line-height: 1.5; padding: 0; } .aps-res-thumb img { max-width: 100%; height: auto; } .aps-res-title { font-size: 14px; } .aps-res-rating, .aps-res-brand, .aps-res-view { font-size: 12px; font-weight: 300; } .sidebar .search_result li a { color: #575756; } .sidebar .search_bar .aps-res-more { float: right; width: 100%; display: block; text-align: center; padding: 0; border: 0; } .sidebar .search_bar .aps-res-more a { display: block; padding: 8px 0; color: #575756; background: #d9d9d9; border-radius: 0  0 10px   10px; border: 0; } span.aps-res-price.aps-price-value { font-size: 12px; color: #575756; } .sidebar .search_result li:nth-last-child(2),.sidebar .search_result li:last-child { border: 0; } .pagecontent-p { display: block; padding: 20px; border: 1px solid #d9d9d9; border-radius: 30px; overflow: hidden; line-height: 30px; } .pagecontent-p p { margin: 0; font-size: 16px; line-height: 30px; } .custompage .pagecontent-p {margin-top: 20px;color: #575756;font-size: 16px;} .custompage .pagecontent-p ul,.custompage .pagecontent-p ol { margin: 0; } .boursacontainer .new-mobiles-container > h2 span { display: inline-block; background: #de348a; color: #ffffff; padding: 6px 20px; padding-left: 40px; border-radius: 100px 40px 0 0 / 100px 40px 0 0; } .sitemapage .pagecontent-p h2 { margin: 16px 0; font-size: 18px; display: block; line-height: 30px; font-weight: 500; border-bottom: 1px solid #de348a; position: relative; } .sitemapage .pagecontent-p h2 span { display: inline-block; background: #de348a; color: #ffffff; padding: 6px 20px; padding-left: 40px; border-radius: 100px 40px 0 0 / 100px 40px 0 0; } .sitemapage .pagecontent-p a { font-size: 16px; } .custompage .pagecontent-p h2 { display: block; font-size: 20px; } .sitemapage .pagecontent-p { margin-top: 20px; } .search_bar { display: block; margin-bottom: 10px; } .erropage h1 { margin-bottom: 20px; } .reviewsection-insidedesc h2 { font-size: 22px; } .reviewsection-insidedesc h3 { font-size: 20px; } .reviewsection-insidedesc h2, .reviewsection-insidedesc h3, .reviewsection-insidedesc h4, .reviewsection-insidedesc h5 { display: block; margin: 20px 0; overflow: hidden; } .custompage .pagecontent-p h3 { display: block; overflow: hidden; margin: 20px 0; font-size: 22px; } .custompage .pagecontent-p h2 { font-size: 24px; } .custompage h1 { line-height: 48px; font-size: 30px; display: block; overflow: hidden; margin-bottom: 20px; color: #151631; } .content-date time { color: #979797; font-family: 'Noor',sans-serif; font-size: 14px; font-weight: 400; line-height: 24px; display: block; } .content-date { display: block; margin-bottom: 20px; } .content-meta { align-items: center; display: grid; grid-column-gap: 14px; grid-template-columns: 50px 1fr; margin: 12px 0; overflow: hidden; } .content-meta img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; width: 50px; height: 50px; border: 2px solid #32b7d1; } .content-meta .author { display: grid; } .content-meta .author a { color: #151631; font-family: 'Noor',sans-serif; font-size: 17px; font-weight: 500; line-height: 20px; } .header-image img { height: 100%; max-width: 100%; object-fit: contain; width: 100%; -webkit-border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; } .header-image { display: block; overflow: hidden; } .custompage .pagecontent-p h2,.custompage .pagecontent-p h3,.custompage .pagecontent-p h4,.custompage .pagecontent-p h5 { margin: 20px 0; } .achharcomps .mobiles-list { margin-bottom: 0; } .addcompare,.alreadycompare {background: #27b9d1;color: #fff;padding: 0;border-radius: 30px;width: 34px;display: block;text-align: center;justify-content: center;align-items: center;height: 34px;position: absolute;z-index: 9;right: 10px;line-height: 34px;bottom: 10px;} .addcompare:before { width: 100px; } .notifis span.dot { z-index: 11; display: block; position: absolute; top: 15px; right: -10px; width: 25px; height: 25px; line-height: 24px; border-radius: 50%; text-align: center; background-color: #575756; color: #fff; } .compare-triangle { z-index: 9; position: fixed; display: block; left: 20px; top: 20px; bottom: 128px; color: #fff; width: 230px; height: calc(100% - 148px); background-color: #27b9d1; padding: 30px 28px; border-radius: 32px 30px 180px 0 / 30px 30px 180px 0; transform: translate3d(-120%,0,0); visibility: hidden; transition: 0.2s; border: 1px solid #f5f5f5; } .compare-triangle .newone-mobile { background: #fff; border: 0; } .comparison-container a.main-buttons { display: block; background: #dd348a; color: #ffffff; padding: 10px 20px; text-align: center; border-radius: 30px; margin-top: 10px; } .compare-triangle.open,.brands-triangle.open { transform: translate3d(0,0,0); visibility: visible; } .compare-triangle .newone-mobile span.x { display: flex; background: #dd348a; width: 28px; height: 28px; line-height: 28px; border-radius: 50%; align-items: center; justify-content: center; } .compare-triangle-remove { position: absolute; bottom: 12px; left: 60%; width: 40px; background: #dd348a; height: 40px; border-radius: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid #f5f5f5; } .brands-triangle { z-index: 9; position: fixed; display: block; right: 20px; bottom: 128px; color: #fff; width: 230px; height: auto; background-color: #27b9d1; padding: 30px; border-radius: 32px 30px 0 180px / 32px 30px 0 180px; transform: translate3d(120%,0,0); visibility: hidden; transition: 0.2s; border: 1px solid #f5f5f5; } ul.brands-bottom-list { margin: 0; margin-bottom: 100px; height: 290px; overflow-y: scroll; display: block; padding: 0; padding-right: 10px; unicode-bidi: bidi-override; direction: ltr; scrollbar-color: #dd348a #0098a8; scrollbar-width: thin !important; } ul.brands-bottom-list li a { display: flex; background: #0098a8; color: #fff; padding: 8px 10px; border-radius: 30px; text-align: right; } ul.brands-bottom-list li { list-style: none; margin-bottom: 8px; direction: rtl; } ul.brands-bottom-list li:last-child { margin: 0; } ul.brands-bottom-list::-webkit-scrollbar { width: 6px; background-color: #0098a8; border-radius: 30px; } ul.brands-bottom-list::-webkit-scrollbar-thumb { border-radius: 30px; background: #dd348a; cursor: pointer; } ul.brands-bottom-list::-webkit-scrollbar-track { background-color: #0098a8; border-radius: 30px; } .brands-triangle-remove { position: absolute; bottom: 12px; right: 60%; width: 40px; background: #dd348a; height: 40px; border-radius: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid #f5f5f5; } ul.brands-bottom-list li a span { margin-left: 6px; display: inline-block; background: #fff; width: 26px; height: 26px; line-height: 26px; text-align: center; border-radius: 30px; } span.alreadycompare { display: flex; background: #575756; z-index: 1; } .brinsidecontainer { overflow: hidden; } .openmenu-phone { display: none; } .custominternal-links { display: block; background: #dd348a; padding:  20px; border-radius: 30px; overflow: hidden; margin: 20px 0; color: #fff; } .custominternal-links a { color: #fff; } .custominternal-links ul { margin: 0; } .custominternal-links span { display: block; border-bottom: 1px solid #fff; line-height: 33px; margin-bottom: 10px; padding: 0 20px; } .compare-triangle .newone-mobile.second { margin-top: 10px; } .slideout-overlay { z-index: 100000; position: fixed; width: 100%; height: 100%; height: 100vh; min-height: 100%; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.8); visibility: hidden; opacity: 0; cursor: pointer; transition: visibility .2s ease,opacity .2s ease; } .slideout-overlay.is-open { visibility: visible; opacity: 1; } nav.menu-nav { position: fixed; width: 265px; height: 100%; height: 100vh; top: 0; overflow: auto; -webkit-overflow-scrolling: touch; visibility: hidden; z-index: 100001; background: #ffffff; display: block; left: auto; right: -265px; transition: transform .2s cubic-bezier(.16,.68,.43,.99); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } nav.menu-nav.is-open { transform: translate3d(-265px,0,0); visibility: visible; } .inside-navmenu { display: block; } button.navmenu-insideclose { display: block; text-align: left; margin: 0; padding: 20px; background: transparent; border: 0; font-family: 'Noor'; width: 100%; cursor: pointer; } .inside-navmenu ul { padding: 0; margin: 0; } .inside-navmenu ul li { list-style: none; } .inside-navmenu ul li a { display: block; padding: 10px; border-bottom: 1px solid #eaeaea; color: #575756; } .insidebrand-top { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; overflow: hidden; margin-bottom: 20px; } .insidebrand-top .home-mobile-select { display: block; padding: 20px; overflow: hidden; border: 1px solid #d9d9d9; border-radius: 30px; } a.dawireft { display: flex; text-align: center; justify-content: center; align-items: center; margin: 0; margin-bottom: 20px; background: #32b7d1; } div#slider-3 { margin: 0 auto; height: 4px; position: relative; direction: rtl; margin-top: 20px; background: #eeeeee; cursor: pointer; border-radius: 4px; } .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; top: 0; height: 100%; background: #cbcbcb; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 16px; height: 16px; cursor: default; top: -6px; margin-left: -0.6em; border-radius: 50%; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #32b7d1; font-weight: bold; outline: none; cursor: pointer; } .dawir-left { font-family: 'Noor'; } .dawir-left-content input#price { font-family: 'Noor'; outline: none; width: 50%; } .dawir-left-content { padding: 20px; border: 1px solid #d9d9d9; border-radius: 30px; } a.dawireft svg { margin-left: 4px; } .maqalatcontainer .pagecontent-p h2,.maqalatcontainer .pagecontent-p h3,.maqalatcontainer .pagecontent-p h4 { display: block; margin: 20px 0; } @media only screen and (max-width: 1200px) { .wrp { max-width: 100%; } .logo { margin-left: 20px; } .header-menu ul li { padding: 20px 10px; } ul.ma3ak-kam-menu { padding-right: 10px; margin-left: 20px; } .home-middle ul li { padding-left: 20px; } } @media only screen and (max-width: 1080px) { .header-wrp > .wrp { display: block; overflow: hidden; padding: 6px; } .logo { float: right; } .header-menu ul { display: none; } span.openmenu-phone { float:left; height: 50px; display: flex; align-items: center; width: 60px; justify-content: center; cursor: pointer; } .wrp { padding: 0; } .home-top .home-mobile-select { padding: 20px; } .maqalat-img { float: none; width: 100%; height: auto; } .maqalat-cont { height: 100%; padding-bottom: 52px; } .news-container .postslist .maqalat-cont {padding-left: 18px;padding-top: 0;} .footer-left ul { grid-template-columns: repeat(1,1fr); } .footer-left { width: 100%; float: none; } .footer-right { display: block; width: 100%; border: 0; text-align: center; border-bottom: 1px solid #fff; margin-bottom: 20px; padding: 0; } .footer-wrapper > .wrp { display: block; padding: 0 20px; } .three-sides-container { display: block; } .home-top .home-mobile-select { border: 0; margin-top: 0; } .home-buttom ul,.sidebar ul:not(.sidebar ul.search_result) { width: 94%; } .maincontent { float: none; width: 100%; } .sidebar { float: none; width: 100%; } div#sameprice .single-mobiles-list { margin-bottom: 30px; } .homemaqalatcontainer .postslist {border: 0;padding: 0;} .maqalatcontainer ,.news-container .postslist{ padding: 0; } .brandslist-container { grid-template-columns: repeat(6,1fr); } ul.ma3ak-kam-menu { padding: 0; margin-left: 0; } .ma3ak-kam-menu-before:after { display: none; } .ma3ak-kam-menu-before { width: 96%; margin: 0 auto; } .pagecontent-p { margin-bottom: 20px; } .achharcomps .mobiles-list { margin-bottom: 20px; } } @media only screen and (max-width: 830px) { .new-mobiles-list { grid-template-columns: repeat(3,1fr); } .brandslist-container { grid-template-columns: repeat(4,1fr); } .view-white-wrp { padding: 20px; } } @media only screen and (max-width: 680px) { ul.momyzt-3yoob-specs,.reviewsection-desc,.wasf-picinside { margin: 0; margin-bottom: 20px; } .new-mobiles-container,.mobiles-list { margin: 20px 0; } .single-phone-info { margin-right: 0; margin-left: 0; margin-bottom: -50px; } .new-mobiles-p { display: block; } span.compareinsidelop { right: 10px; top: 10px; } .new-mobiles-p .resultnum { margin-bottom: 10px; } .new-mobiles-list { grid-template-columns: repeat(2,1fr); } .brandslist-container,.brandslist-container-inside { grid-template-columns: repeat(3,1fr); } .new-mbselect > span, .new-mbselect > select { width: 50%; } .new-mbselect > select { width: 60%; } .wasf-picinside-r { width: 100%; float: none; position: relative; border-radius: 30px 30px  0 0; text-align: center; } .wasf-picinside-l { float: none; width: 100%; border-radius: 0 0 30px 30px; border: 1px solid #d9d9d9; border-top: none; } .insidebuy-links ul { display: block; } .insidebuy-links ul a { margin-bottom: 10px; } .compare-2-mobiles { display: block; } .compare-2-mobiles >div.comp1 { margin-bottom: 30px; } div#mobile-e5tyrak { max-width: 100%; } .h3home { height: auto; display: block; text-align: center; padding: 10px 20px; line-height: 30px; } .h3home svg { display: none; } h2.h3home.mmzyatttl span:first-child,h2.h3home.mmzyatttl > span:last-child {text-align: center} .phones2com-top { padding: 20px 0; } .insidebuy-links a { font-size: 14px; line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .insidebuy-links a span { display: none; } .insidebuy-links a .insidebuy-icon { width: 30px; height: 30px; margin-left: 8px; } .phones2com-btm .insidebuy-links a.currentphonecompare { line-height: 30px; } span.child2price,span.child2rating { float: none; display: block; text-align: center; } span.child2price { margin-bottom: 10px; } div#mobile_1_name, div#mobile_2_name { font-size: 18px; margin: 10px 0; } input.compare-input { line-height: 42px; } .cool-Comparison { margin: 20px auto; } .single-phone-r { float: none; position: relative; width: 100%; border: 0; border-radius: 0; top: 0; } .single-phone-l { display: block; float: none; text-align: center; width: 100%; } .singlephonel-top { border-radius: 0; margin: 0; padding: 20px; } ul.specs-tool { margin: 0 auto; padding: 0; text-align: center; margin-bottom: 20px; } .final-takyeem {width: 100%;} .singlephonel-bottom ul li span.specs-unit {font-size: 12px;} .sinfo-bottom ul { display: block; } .sinfo-bottom ul li { margin: 0; } .sinfo-bottom ul li.jumiabuy,.sinfo-bottom ul li.souqbuy { margin: 0; } .sinfo-bottom ul li.souqbuy { margin-bottom: 10px; } .sinfo-bottom ul li:first-child { max-width: 40%; margin: 0 auto; margin-bottom: 20px; z-index: 1; } .sinfo-bottom ul li:first-child span { background: #ffffff!important; color: #575756; border-radius: 30px; font-size: 15px; padding: 10px 0; } .sinfo-bottom ul li:first-child span:before { display: none; } .singlephonel-bottom { border-radius: 0; margin: 0; padding: 20px 0; padding-bottom: 50px; } .sinfo-bottom {top: -74px;padding-bottom: 30px;} .singlephonel-bottom ul li p.specs-num { line-height: 10px; margin-bottom: 3px; } .sinfo-top { border-radius: 30px 30px 30px 30px; } .search-modal { margin: 0; margin-top: 10px; } h2.h3home.mmzyatttl { line-height: 26px; padding: 10px; } } @media only screen and (max-width: 480px) { .brandslist-container,.brandslist-container-inside { grid-template-columns: repeat(2,1fr); } .sinfo-bottom ul li:first-child { max-width: 50%; } .wasf-picinside-l ul li img { object-fit: cover; } .insidebrand-top { display: block; margin-bottom: 10px; } .insidebrand-top .home-mobile-select { margin-bottom: 20px; } .compare-square, .brands-square { bottom: 20px; } .compare-triangle,.brands-triangle { bottom: 20px; height: calc(100% - 40px); } }span.compareinsidelop:after { top: 22px!important; }

/* When all gallery images are missing, .wasf-picinside-l is not rendered — let .wasf-picinside-r take the full row instead of staying glued to the right. */
.wasf-picinside > .wasf-picinside-r:only-child{float:none;width:100%;position:relative;top:auto;right:auto;bottom:auto;left:auto;border-radius:30px;padding:30px;}

/* Breadcrumbs — uses RankMath markup wrapped in <nav class="mob-breadcrumbs"> */
.mob-breadcrumbs{margin:0 0 16px;font-family:'Noor',sans-serif;font-size:13px;line-height:1.8;color:#575756}
.mob-breadcrumbs .rank-math-breadcrumb{margin:0}
.mob-breadcrumbs p{margin:0;padding:8px 16px;background:#f5f5f5;border-radius:30px;display:inline-block;max-width:100%;direction:rtl}
.mob-breadcrumbs a{color:#27b9d1;text-decoration:none;transition:color .15s ease-in-out}
.mob-breadcrumbs a:hover,.mob-breadcrumbs a:focus{color:#dd348a}
.mob-breadcrumbs .separator{color:#bcbcbc;margin:0 6px;font-weight:400}
.mob-breadcrumbs .last{color:#575756;font-weight:700}
@media (max-width:640px){
  .mob-breadcrumbs{font-size:12px;margin:0 0 12px}
  .mob-breadcrumbs p{padding:6px 12px;line-height:1.6}
  .mob-breadcrumbs .last{display:inline-block;max-width:60vw;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}
}
/* === Compare & Brands drawers — responsive fixes === */

/* The inline X-remove button is just a wrapper around <span class="x"> — the
   visual is the pink circle inside, so the <button> itself must be transparent
   and tightly aligned to sit flush next to the floated price pill. */
.compare-triangle .newone-mobile .compare-remove,
.brands-triangle  .newone-mobile .compare-remove {
  background: transparent;
  margin: 0;
  line-height: 0;
  vertical-align: middle;
  display: inline-flex;
}

/* Replace left:60% / right:60% with a stable inset from the rounded edge.
   These drawers have an asymmetric bottom corner — close X sits on the flat side. */
.compare-triangle-remove { left: auto; right: 24px; }
.brands-triangle-remove  { right: auto; left: 24px; }

/* The drawer cards are always 230px wide regardless of viewport — the original
   16px title font truncates phone names. Apply tighter chrome at all sizes. */
.compare-triangle .newone-mobile,
.brands-triangle  .newone-mobile { padding: 8px; }
.compare-triangle .newone-img,
.brands-triangle  .newone-img { height: 110px; margin: 8px 0; }
.compare-triangle .newone-mobile .title,
.brands-triangle  .newone-mobile .title { font-size: 13px; line-height: 22px; margin-bottom: 6px; }
.compare-triangle span.newone-price,
.brands-triangle  span.newone-price { font-size: 11px; padding: 4px 12px; }
.compare-triangle .newone-mobile span.x,
.brands-triangle  .newone-mobile span.x { width: 24px; height: 24px; line-height: 24px; }

/* On narrow phones (≤ 600px) cap the drawer width so it can't eat the viewport. */
@media (max-width: 600px) {
  .compare-triangle,
  .brands-triangle {
    max-width: calc(100vw - 80px);
    padding: 22px 18px;
  }
  .compare-triangle-remove,
  .brands-triangle-remove { width: 34px; height: 34px; }
}