/*
Theme Name: Devsigh Limited
Theme URI: www.devsigh.io
Author: Devsigh Team
Description: Devsigh Website Theme
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.4
Version: 1.0
Text Domain: devsigh
*/

.bg-devsigh-blue {
    background-color: #00BFF2;
}

.bg-devsigh-black {
    background-color: #231F20;
}

.fixed-header {
    background-color: #BDCCD4;
    color: #000;
}
div.telephone {
    float:left;
}
div.telephone::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z"/> </svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -3px;

}
div.service {
    float: right;
}
div.service ul {
    display: inline-block;
}
div.service ul li {
    display: inline-block;
    line-height:18px;
}
div.service ul li::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-left: 5px;
    margin-top: -3px;
}

div.main-header div.logo {

}

div.carousel ul.carousel {
    width: 100vw;
    height: 300px;
    padding: 20px;
    display: flex;
    gap: 4vw;

    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

div.carousel ul.carousel li {
    list-style-type: none;
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 20px;

    flex: 0 0 100%;
    scroll-snap-align: center;


}
div.carousel ul.carousel li.ecommerce {
    background-image: url('assets/banners/ecommerce.png');
}
div.carousel ul.carousel li.data {
    background-color: rgba(255,0,0, 0.5);
}

li.contact-us-menu {
    background-color: #00C0F3;
}

footer#devsigh-footer {
    background-image: url('assets/images/footer.png');
    background-size: cover;
}
:root{
    --brand: #d35400;               /* your brand color */
    --brand-600: #c14c00;           /* hover/darker */
    --surface: #fff;
    --text: #555;
}

.process{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2.5rem;
    text-align:center;
    margin:3rem auto;
    max-width:1100px;
}

.step{
    position:relative;
    flex:1;
    padding:1.5rem;
    background:var(--surface);
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    transition:transform .2s ease, box-shadow .2s ease;
}

.step:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.1);
}

/* Headings copy your brand */
.step h3{
    font-size:1.4rem;
    margin-bottom:.6rem;
    color:var(--brand);
}
.step span{ color:var(--text); line-height:1.55; display:block; }

/* ➤ Chevron as pseudo-element on all but the last step */
.step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    right:-1.25rem;                 /* space between cards */
    transform:translateY(-50%);
    width:0; height:0;
    border-top:16px solid transparent;
    border-bottom:16px solid transparent;
    border-left:24px solid var(--brand);
    transition:transform .2s ease, border-left-color .2s ease, filter .2s ease;
    filter:drop-shadow(0 2px 2px rgba(0,0,0,.1));
}

/* Hover the card → chevron reacts too */
.step:hover::after{
    border-left-color:var(--brand-600);
    transform:translateY(-50%) translateX(2px);
    filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));
}

/* Optional: make the chevron itself respond to pointer */
.step:not(:last-child){ cursor:default; }
.step:not(:last-child)::after{ pointer-events:none; } /* keep it simple */

/* Responsive: stack & turn chevrons into down-arrows */
@media (max-width: 800px){
    .process{ flex-direction:column; gap:1.5rem; }
    .step{ text-align:left; }
    .step:not(:last-child)::after{
        right:50%;
        top:auto;
        bottom:-1rem;
        transform:translateX(50%);
        border-top:24px solid var(--brand);    /* ▼ */
        border-left:16px solid transparent;
        border-right:16px solid transparent;
        border-bottom:none;
    }
    .step:hover::after{
        border-top-color:var(--brand-600);
        transform:translateX(50%) translateY(2px);
    }
}

/* Dark theme tweak (if you run dark backgrounds) */
@media (prefers-color-scheme: dark){
    :root{ --surface:#0f0f10; --text:#c9c9c9; }
    .step{ box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.5); }
}