/* Theme Name: Loraic Child Theme URI: http://demo.bravisthemes.com/loraic Author: Bravis-Themes Author URI: https://bravisthemes.com/ Description: Loraic is a modern and carefully designed theme geared specifically towards all ,It will be suitable for any transport,logistics and movers management business. It will also be suitable for any kind of professional business template. It can be used for various business sites like ship based transport, air based transport etc. It is a complete designs with all minimum required contents for courier business. Version: 1.0.3 License: ThemeForest License URI: https://themeforest.net/licenses Template: loraic Text Domain: loraic-child Tags: business, cargo, corporate, courier, frieght, logistics, movers, multipurpose business, shipment, transport, transportation. */ /*.pxl-grid .pxl-item--inner .pxl-item--featured:root { --primary-color:none!important; --link-color-hover:none!important;--link-color-active:none!important} :root {--four-color: #005a86!important;} */ .pxl-contact-form .wpcf7-form-control {text-transform:none!important;/*text-transform:none!important;*/} .wrap-ctf4 input {text-transform:none!important;} .pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner:hover .pxl-item--featured:before{ opacity:0!important} .pxl-service-carousel3 .pxl-swiper-slide .pxl-item--inner .pxl-item--featured .pxl-icon { background-color: rgba(255, 255, 255, 0.9) !important;} .wrap-appoiment { background:#005A86!important; padding:20px!important; margin:0!important} .wrap-appoiment input {font-size:16px !important; font-weight:300!important;} .wrap-appoiment textarea {font-size:16px !important; font-weight:300!important;} .wrap-appoiment .input-filled:nth-child(1) input {background:white !important;} .wrap-appoiment button {font-size:22px!important; color:white !important; font-weight:500!important;} .wrap-ctf4 button {font-size:22px!important; color:#005A86 !important; font-weight:500!important; padding:12px 25px!important; background:#ffffff!important; border:solid #005A86 2px!important; height:auto!important} .wrap-ctf4 button:hover {color:#fff!important; background:#005A86!important;} .elementor-widget-container .pxl-accordion {transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--e-transform-transition-duration,.4s);} .elementor-widget-container .pxl-accordion .pxl-item--title {border-radius:0!important; padding: 15px 15px 15px 18px!important;} .form-text-white {color:white; font-size:18px!important;} .elementor-widget-container .pxl-accordion .pxl-item--content {padding:22px 22px!important; box-shadow: 0 0 20px 0 rgb(0 0 0 / 13%)!important; transition-property:height!important; transition-duration: 800ms!important;} .elementor-widget-container .pxl-accordion .pxl--item + .pxl--item{ margin-top:15px!important;} .elementor-widget-container .pxl-accordion .pxl--item {box-shadow: 0 0 20px 0 rgb(0 0 0 / 13%)!important;} .elementor-widget-container .pxl-accordion .active .pxl-item--title {color:#ffffff!important;} .elementor-widget-container .pxl-accordion .pxl-item--title {transition:all 0.2s ease;} .elementor-widget-container .pxl-accordion .pxl-item--title:hover {background-color:#005A86!important;color:#ffffff!important;} .pxl-grid-item .pxl-item--inner .pxl-item--featured .elementor img:hover {transform: scale(1.5);} .pxl-grid .pxl-item--inner .pxl-item--featured img {transition: all 1.3s ease; } .pxl-grid .pxl-item--inner .pxl-item--featured img:hover {transform: scale(1.3)!important; filter: blur(2px)!important; webkit-filter: blur(2px); /* Chrome, Safari, Opera */ transform: rotate(30deg);} #productview .pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner {padding-bottom:0!important} #productview .pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner .wrap-inner {padding: 30px 35px 35px 35px!important;} #productview .pxl-grid-item .pxl-item--inner .pxl-item--featured .elementor img:hover {transform: scale(1.5);} #productview .pxl-grid .pxl-item--inner .pxl-item--featured img {transition: all 1.3s ease; } #productview .pxl-grid .pxl-item--inner .pxl-item--featured img:hover {transform: scale(1.8)!important; filter: blur(3px)!important; webkit-filter: blur(3px)!important; /* Chrome, Safari, Opera */ transform: rotate(50deg);} #productview .pxl-grid .pxl-item--inner .pxl-item--featured .pxl-icon img:hover {transform:none!important;filter:none!important; webkit-filter: none!important} #productview .pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner .pxl-item--featured:before {position:relative;} /*easy accordion*/ /*#sp-ea-13889 .spcollapsing { transition-duration:600ms!important;} #sp-ea-13889 .sp-easy-accordion>.sp-ea-single>.sp-collapse>.ea-body {font-size:16px!important;}*/ #sp-ea-13889 .ea-header:hover {background:#005A86!important;} #sp-ea-13889 .ea-header:hover a {color:#ffffff!important;} #sp-ea-13889 .ea-expand h3 {background:#005A86!important;} #sp-ea-13889 .ea-expand h3 a {color:#ffffff!important;} #sp-ea-13889 .ea-header a:hover .ea-expand-icon{color:#ffffff!important;} #sp-ea-13889 .collapsed .ea-expand-icon .eap-icon-ea-expand-plus {color:#ffffff!important;} #sp-ea-13889 .eap-icon-ea-expand-minus {color:#ffffff!important;} #productview1 .pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner .pxl-item--featured:before {position:none;} #productview1 .pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner .pxl-item--featured { border-radius: 14px 14px 0 0 !important;} #productview1 .pxl-service-grid-layout4 .pxl-grid-item .pxl-item--inner .wrap-inner { border-radius:0 0 14px 14px !important; position: relative !important; max-width: 100% !important; bottom: auto !important; right: auto !important; } #productview1 .pxl-grid .pxl-item--inner .pxl-item--featured .pxl-icon img:hover {transform:none!important;filter:none!important; webkit-filter: none!important} /* Container for the tooltip */ .tooltip { position: relative; /* Needed to position the tooltip text relative to its container */ display: inline-block; /* Allows the container to wrap its content and other inline elements to flow around it */ border-bottom: 1px dotted black; /* Optional: adds a dotted underline to the hoverable text */ cursor: help; /* Optional: changes cursor to a question mark icon */ } /* The actual tooltip text */ .tooltip .tooltiptext { visibility: hidden; /* Hide the tooltip by default */ width: 180px; background-color: black; color: #fff; font-size:16px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; /* Position the tooltip text */ z-index: 1; /* Ensures the tooltip appears on top of other elements */ bottom: 150%; /* Position the tooltip above the container (can be adjusted for top/bottom/left/right) */ left: 50%; padding:20px; margin-left: -90px; /* Centers the tooltip (half of the width 120px/2 = 60px) */ opacity: 0; /* Use opacity for a fade-in effect */ transition: opacity 0.3s; /* Smooth transition for the fade effect */ } /* Show the tooltip text when the user hovers over the container */ .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; /* Positions the arrow at the bottom of the tooltip box */ left: 50%; margin-left: -5px; /* Centers the arrow (half of the border-width) */ border-width: 5px; border-style: solid; border-color: black transparent transparent transparent; /* Creates a black downward-pointing triangle */ } /*saudi map final*/ /* Container for the map */ .map-container { position: relative; display: inline-block; /*box-shadow: 0 4px 15px rgba(0,0,0,0.1);*/ border-radius: 8px; overflow: hidden; } /* The map image */ .saudi-map { display: block; max-width: 100%; height: auto; } /* The interactive hover zone over the orange dot */ .dot-trigger { position: absolute; /* ADJUST THESE TO ALIGN WITH YOUR IMAGE */ top: 66.5%; left: 32.6%; width: 40px; /* Size of the hit area */ height: 40px; border-radius: 50%; cursor: pointer; /* Change 'transparent' to 'rgba(255,0,0,0.3)' while testing to see the box */ background-color: rgba(255,0,0,0.3); } /* The Address Tooltip */ .address-box { visibility: hidden; width: 220px; background-color: #ff7d44; color: #fff; text-align: center; border-radius: 6px; padding: 12px; position: absolute; z-index: 10; bottom: 125%; /* Positions it above the dot */ left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.4s, transform 0.4s; font-size: 14px; line-height: 1.4; box-shadow: 0 5px 15px rgba(0,0,0,0.3); } /* Tooltip arrow */ .address-box::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #ff7d44 transparent transparent transparent; } /* Show address on hover */ .dot-trigger:hover .address-box { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-10px); } @media (max-width: 767px) { .dot-trigger {top: 66.5%; left: 32.6%; width: 35px; /* Size of the hit area */ height: 35px; }} @media (max-width: 512px) { .dot-trigger {top: 61.5%; left: 30.6%; width: 30px; /* Size of the hit area */ height: 30px; }} /*export details page*/ :root .exportdiv { --primary: #3b82f6; --accent: #ef4444; --land: #f8fafc; --water: #f1f5f9; } .exportdiv { margin: 0; font-family: sans-serif; background: var(--water); height: 600vh; } .hero { height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #0f172a; color: white; text-align: center; padding: 0 20px; } .map-section { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .map-card { width: 95%; max-width: 1100px; background: white; padding: 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative; } /* Tooltip Styling */ .tooltipexport { position: absolute; background: white; padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-left: 3px solid var(--primary); font-size: 10px; font-weight: bold; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; pointer-events: none; z-index: 10; white-space: nowrap; } .tooltipexport.active { opacity: 1; transform: translateY(0); } .tooltipexport b { color: var(--primary); text-transform: uppercase; } .route-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.05s linear; opacity: 0.6; } .land { fill: var(--land); stroke: #cbd5e1; stroke-width: 1; } .label { font-size: 12px; font-weight: bold; fill: #64748b; } .hub-dot { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5)); }