/* =========================================================
   UNO Technology Services
   Premium Corporate CSS Framework V2.0

   PART 1:
   Core System
   Variables
   Reset
   Typography
   Utilities
   Animations

========================================================= */


/* =========================================================
   ROOT DESIGN TOKENS
========================================================= */

:root {

    /* =====================
       UNO BRAND COLORS
    ===================== */

    --color-primary:#FF5A00;
    --color-primary-dark:#E54D00;
    --color-primary-light:#FF8C00;

    --color-secondary:#FF7A1A;
    --color-accent:#FF9A3D;


    --color-primary-rgb:
    255,90,0;


    --color-secondary-rgb:
    255,122,26;


    --color-accent-rgb:
    255,154,61;



    /* =====================
       LIGHT THEME
    ===================== */

    --color-white:#FFFFFF;

    --color-bg:#F8F9FB;

    --color-surface:#FFFFFF;

    --color-surface-2:#F3F4F6;

    --color-surface-3:#ECEEF2;


    --color-dark:#0F1115;


    --color-text:#111827;

    --color-text-secondary:#4B5563;

    --color-text-muted:#9CA3AF;

    --color-text-light:#F8FAFC;


    --color-border:#E5E7EB;

    --color-border-light:#F3F4F6;



    /* =====================
       GRADIENT SYSTEM
    ===================== */


    --gradient-primary:

    linear-gradient(
        135deg,
        #FF5A00,
        #FF9A3D
    );


    --gradient-orange:

    linear-gradient(
        135deg,
        #FF7A1A,
        #FFB067
    );


    --gradient-dark:

    linear-gradient(
        135deg,
        #0F1115,
        #161A22
    );



    /* =====================
       GLASS SYSTEM
    ===================== */


    --glass-bg:

    rgba(
        255,
        255,
        255,
        .65
    );


    --glass-border:

    rgba(
        255,
        255,
        255,
        .35
    );



    /* =====================
       SHADOW SYSTEM
    ===================== */


    --shadow-xs:

    0 1px 2px
    rgba(0,0,0,.04);



    --shadow-sm:

    0 4px 12px
    rgba(0,0,0,.06);



    --shadow-md:

    0 10px 30px
    rgba(0,0,0,.08);



    --shadow-lg:

    0 20px 50px
    rgba(0,0,0,.12);



    --shadow-xl:

    0 35px 80px
    rgba(0,0,0,.16);



    --shadow-primary:

    0 20px 50px
    rgba(255,90,0,.25);




    /* =====================
       TYPOGRAPHY
    ===================== */


    --font-arabic:
    'Cairo',sans-serif;


    --font-english:
    'Inter',sans-serif;


    --font-body:
    var(--font-arabic);


    --font-heading:
    var(--font-arabic);



    /* =====================
       LAYOUT
    ===================== */


    --container-max:
    1320px;


    --container-padding:
    2rem;


    --section-padding:
    7rem;



    /* =====================
       RADIUS SYSTEM
    ===================== */


    --radius-xs:
    6px;


    --radius-sm:
    10px;


    --radius-md:
    16px;


    --radius-lg:
    24px;


    --radius-xl:
    32px;


    --radius-full:
    9999px;



    /* =====================
       MOTION SYSTEM
    ===================== */


    --transition-fast:
    .2s ease;


    --transition-base:
    .35s cubic-bezier(.22,1,.36,1);


    --transition-slow:
    .6s cubic-bezier(.22,1,.36,1);


    --ease-premium:

    cubic-bezier(
        .22,
        1,
        .36,
        1
    );



    /* =====================
       Z INDEX
    ===================== */


    --z-preloader:9999;

    --z-header:1000;

    --z-modal:2000;

    --z-scroll:100;

}




/* =========================================================
   DARK MODE SYSTEM
========================================================= */


[data-theme="dark"] {


    --color-bg:#0F1115;


    --color-surface:#161A22;


    --color-surface-2:#1E232D;


    --color-surface-3:#252B36;



    --color-text:#F8FAFC;


    --color-text-secondary:#CBD5E1;


    --color-text-muted:#94A3B8;



    --color-border:#2A3240;


    --color-border-light:#202631;



    --glass-bg:

    rgba(
        22,
        26,
        34,
        .7
    );



    --glass-border:

    rgba(
       255,
       255,
       255,
       .08
    );



    --shadow-lg:

    0 25px 60px
    rgba(0,0,0,.45);

}



/* =========================================================
   RESET
========================================================= */


*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    font-size:16px;

    -webkit-font-smoothing:
    antialiased;

}



body{

    font-family:
    var(--font-body);

    background:
    var(--color-bg);

    color:
    var(--color-text);

    line-height:
    1.7;

    overflow-x:hidden;

    transition:
    background .35s ease,
    color .35s ease;

}



[dir="ltr"] body{

    font-family:
    var(--font-english);

}



::selection{

    background:
    var(--color-primary);

    color:white;

}



img{

    max-width:100%;

    height:auto;

    display:block;

}



a{

    color:inherit;

    text-decoration:none;

}



button,
input,
textarea,
select{

    font-family:inherit;

}



button{

    cursor:pointer;

}



ul,
ol{

    list-style:none;

}





/* =========================================================
   CONTAINER SYSTEM
========================================================= */


.container{

    width:100%;

    max-width:
    var(--container-max);

    margin:auto;

    padding-inline:
    var(--container-padding);

}





/* =========================================================
   SECTION SYSTEM
========================================================= */


.section{

    position:relative;

    padding:
    var(--section-padding)
    0;

}



.section-header{

    max-width:760px;

    margin:
    0 auto 4rem;

    text-align:center;

}



.section-label{

    display:inline-flex;

    align-items:center;

    gap:.5rem;


    color:
    var(--color-primary);


    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}



.section-title{

    font-size:
    clamp(
        2rem,
        4vw,
        3.2rem
    );


    font-weight:900;

    line-height:1.15;


    letter-spacing:-.03em;

    color:
    var(--color-text);


}



.section-desc{

    margin-top:1rem;

    color:
    var(--color-text-secondary);


    font-size:1.1rem;

}




/* =========================================================
   UTILITY CLASSES
========================================================= */


.text-gradient{


background:
var(--gradient-primary);


-webkit-background-clip:text;

background-clip:text;

color:transparent;


}



.glass{


background:
var(--glass-bg);


border:
1px solid
var(--glass-border);


backdrop-filter:
blur(20px);


-webkit-backdrop-filter:
blur(20px);


}



.hidden{

display:none!important;

}




/* =========================================================
   PREMIUM ANIMATIONS
========================================================= */


@keyframes fadeUp{


from{

opacity:0;

transform:
translateY(40px);

filter:
blur(10px);

}


to{

opacity:1;

transform:none;

filter:
blur(0);

}


}



.reveal{

opacity:0;

transform:
translateY(40px);

filter:
blur(10px);

transition:

all .8s
var(--ease-premium);

}



.reveal.show{

opacity:1;

transform:none;

filter:blur(0);

}




@media(max-width:992px){

:root{

--container-padding:
1.5rem;


--section-padding:
5rem;

}


}



@media(max-width:600px){

:root{

--container-padding:
1rem;


--section-padding:
4rem;

}


}
/* =========================================================
   UNO CSS V2.0
   PART 2

   HEADER
   NAVIGATION
   MOBILE MENU
   HERO SECTION

========================================================= */


/* =========================================================
   PREMIUM HEADER
========================================================= */


.header{

    position:fixed;

    top:0;

    left:0;

    right:0;

    z-index:
    var(--z-header);

    padding:
    1.25rem 0;

    transition:
    all .4s var(--ease-premium);

}



.header.scrolled{


    padding:
    .75rem 0;


    background:

    rgba(
        255,
        255,
        255,
        .75
    );


    backdrop-filter:
    blur(25px)
    saturate(180%);


    -webkit-backdrop-filter:
    blur(25px)
    saturate(180%);



    border-bottom:

    1px solid
    rgba(
        255,
        90,
        0,
        .12
    );



    box-shadow:

    0 15px 40px
    rgba(
        0,
        0,
        0,
        .08
    );

}



[data-theme="dark"] .header.scrolled{


background:

rgba(
22,
26,
34,
.75
);


border-color:

rgba(
255,
255,
255,
.08
);


}



/* Header Container */


.header-container{


display:flex;

align-items:center;

justify-content:space-between;

gap:2rem;


}



/* =========================================================
   LOGO
========================================================= */


.logo{


display:flex;

align-items:center;

gap:.85rem;


font-weight:800;

font-size:1.25rem;


position:relative;


}



.logo img{


width:58px;


transition:
transform .4s var(--ease-premium);


}



.logo:hover img{


transform:

scale(1.08)
rotate(-3deg);


}



.logo::after{


content:"";


position:absolute;


width:70px;

height:70px;


background:

radial-gradient(

circle,

rgba(
255,
90,
0,
.25
),

transparent

);


filter:blur(20px);


z-index:-1;


}




.logo-text{

display:none;

}





/* =========================================================
   MAIN NAVIGATION
========================================================= */


.nav-list{


display:flex;

align-items:center;

gap:.35rem;


}



.nav-link{


position:relative;


padding:

.65rem

1.15rem;



font-size:.9rem;


font-weight:600;



color:

var(--color-text-secondary);



border-radius:

var(--radius-full);



transition:

all .35s var(--ease-premium);



}



.nav-link::before{


content:"";


position:absolute;


bottom:3px;


left:50%;


width:0;


height:2px;


background:

var(--gradient-primary);



transform:

translateX(-50%);



transition:

width .35s var(--ease-premium);



}



.nav-link:hover,
.nav-link.active{


color:

var(--color-primary);



background:

rgba(

255,

90,

0,

.08

);


}



.nav-link:hover::before,
.nav-link.active::before{


width:60%;


}



/* =========================================================
   HEADER ACTIONS
========================================================= */


.header-actions{


display:flex;

align-items:center;

gap:.75rem;


}



.theme-toggle,
.lang-toggle{


height:42px;


border-radius:

var(--radius-full);


display:flex;


align-items:center;


justify-content:center;



background:

var(--color-surface-2);



color:

var(--color-text);



transition:

all .35s var(--ease-premium);



border:

1px solid

var(--color-border);



}



.theme-toggle{


width:42px;


}



.lang-toggle{


padding:

0 1rem;


font-size:.8rem;

font-weight:800;


}



.theme-toggle:hover,
.lang-toggle:hover{


background:

var(--color-primary);


color:white;


border-color:

var(--color-primary);



transform:

translateY(-3px);



}



/* Theme Icons */


.theme-toggle .icon-moon{


display:none;


}



[data-theme="dark"]

.theme-toggle .icon-sun{


display:none;


}



[data-theme="dark"]

.theme-toggle .icon-moon{


display:block;


}





/* CTA */


.header-cta{


margin-inline:.5rem;


}



/* =========================================================
   MOBILE MENU BUTTON
========================================================= */


.mobile-menu-toggle{


display:none;


width:44px;


height:44px;


border-radius:

var(--radius-md);



background:

var(--color-surface-2);



align-items:center;


justify-content:center;


flex-direction:column;


gap:5px;



}



.hamburger-line{


width:22px;


height:2px;


background:

var(--color-text);


border-radius:

10px;



transition:

all .35s var(--ease-premium);


}



.mobile-menu-toggle.active

.hamburger-line:nth-child(1){


transform:

translateY(7px)
rotate(45deg);


}



.mobile-menu-toggle.active

.hamburger-line:nth-child(2){


opacity:0;


}



.mobile-menu-toggle.active

.hamburger-line:nth-child(3){


transform:

translateY(-7px)
rotate(-45deg);


}




/* =========================================================
   MOBILE OVERLAY
========================================================= */


.mobile-menu-overlay{


position:fixed;


inset:0;


background:

rgba(
0,
0,
0,
.55
);


backdrop-filter:

blur(5px);


opacity:0;

visibility:hidden;



transition:

all .35s ease;


}



.mobile-menu-overlay.active{


opacity:1;

visibility:visible;


}




/* =========================================================
   HERO SECTION
========================================================= */


.hero{


min-height:

100vh;


display:flex;


align-items:center;


position:relative;


overflow:hidden;



padding-top:100px;


}





.hero-bg{


position:absolute;


inset:0;


z-index:-3;


}



.hero-bg img{


width:100%;


height:100%;


object-fit:cover;


opacity:.45;


}



[data-theme="dark"]

.hero-bg img{


opacity:.2;


}




.hero-overlay{


position:absolute;


inset:0;


background:


linear-gradient(

135deg,

rgba(
255,
90,
0,
.12
),

transparent 50%

);



z-index:-2;


}





/* =========================================================
   FLOATING TECHNOLOGY ELEMENTS
========================================================= */


.floating-elements{


position:absolute;


inset:0;


overflow:hidden;


z-index:-1;


}



.float-el{


position:absolute;


border-radius:50%;


background:

var(--gradient-primary);



opacity:.12;


filter:

blur(70px);



}



.float-1{


width:450px;

height:450px;


top:-150px;


right:-100px;


animation:

floatMove 18s infinite;


}



.float-2{


width:350px;


height:350px;


bottom:-100px;


left:-120px;


animation:

floatMove 20s infinite reverse;


}



.float-3{


width:250px;


height:250px;


top:40%;


left:35%;


animation:

floatMove 16s infinite;


}



@keyframes floatMove{


0%,
100%{


transform:

translate(0,0);


}


50%{


transform:

translate(
30px,
-40px
);


}



}





/* =========================================================
   HERO GRID
========================================================= */


.hero-container{


display:grid;


grid-template-columns:

1fr 1fr;



align-items:center;


gap:5rem;



position:relative;


}





/* Badge */


.hero-badge{


display:inline-flex;


align-items:center;


gap:.7rem;



padding:

.6rem

1.2rem;



background:

rgba(

255,

90,

0,

.1

);



color:

var(--color-primary);



border-radius:

var(--radius-full);



font-weight:700;


font-size:.85rem;


margin-bottom:1.5rem;


}



.badge-dot{


width:9px;


height:9px;


border-radius:50%;


background:

var(--color-primary);


animation:

pulseDot 2s infinite;


}



@keyframes pulseDot{


50%{


transform:scale(1.5);


opacity:.4;


}


}





/* Hero Title */


.hero-title{


font-size:

clamp(

2.5rem,

5vw,

4.5rem

);



font-weight:900;


line-height:1.1;



letter-spacing:-.05em;


margin-bottom:1.5rem;


color:

var(--color-text);


}




.hero-subtitle{


font-size:

1.2rem;


max-width:600px;


color:

var(--color-text-secondary);



line-height:1.8;


margin-bottom:2.5rem;


}





/* Buttons */


.hero-buttons{


display:flex;


gap:1rem;


flex-wrap:wrap;


margin-bottom:3rem;


}





/* Stats */


.hero-stats{


display:flex;


gap:3rem;


}



.stat-number{


font-size:

2.2rem;


font-weight:900;


color:

var(--color-primary);


}





/* Hero Image */


.hero-image{


position:relative;


animation:

heroFloat 6s infinite;


}



.hero-image img{


max-width:650px;


margin:auto;


}



@keyframes heroFloat{


50%{


transform:

translateY(-20px);


}


}




/* Scroll */


.hero-scroll-indicator{


position:absolute;


bottom:2rem;


left:50%;


transform:

translateX(-50%);


}



.scroll-mouse{


width:28px;


height:44px;


border:

2px solid

var(--color-text-muted);



border-radius:

30px;


display:flex;


justify-content:center;


padding-top:8px;


}



.scroll-wheel{


width:5px;


height:9px;


background:

var(--color-primary);


border-radius:10px;


animation:

scrollWheel 2s infinite;


}



@keyframes scrollWheel{


50%{


transform:

translateY(12px);


opacity:.3;


}


}
/* =========================================================
   UNO CSS V2.0

   PART 3

   ABOUT
   VALUES
   SERVICES
   WHY CHOOSE US

========================================================= */



/* =========================================================
   ABOUT SECTION
========================================================= */


.about-grid{


display:grid;


grid-template-columns:

1.5fr 1fr 1fr;



gap:1.5rem;


margin-bottom:2rem;


}




.about-card{


position:relative;


background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-lg);



padding:

2.5rem;



overflow:hidden;



transition:

all .45s var(--ease-premium);



}




.about-card::before{


content:"";


position:absolute;


inset:0;


background:

linear-gradient(

135deg,

rgba(

255,

90,

0,

.08

),

transparent 50%

);



opacity:0;



transition:

opacity .4s ease;



}



.about-card:hover::before{


opacity:1;


}




.about-card:hover{


transform:

translateY(-10px);



border-color:

rgba(

255,

90,

0,

.35

);



box-shadow:

var(--shadow-lg);



}




.about-icon{


width:

64px;


height:

64px;



display:flex;


align-items:center;


justify-content:center;



background:

rgba(

255,

90,

0,

.1

);



color:

var(--color-primary);



border-radius:

var(--radius-md);



margin-bottom:

1.5rem;



font-size:1.5rem;


transition:

all .4s var(--ease-premium);



}




.about-card:hover .about-icon{


background:

var(--gradient-primary);



color:white;



transform:

scale(1.1)

rotate(-5deg);



}





.about-card h3{


font-size:

1.35rem;


font-weight:

800;



margin-bottom:

.8rem;



}




.about-card p{


color:

var(--color-text-secondary);



font-size:

.95rem;



line-height:

1.8;



}




/* Main About Card */


.about-main{


background:

linear-gradient(

145deg,

var(--color-surface),

var(--color-surface-2)

);



}





/* =========================================================
   VALUES SYSTEM
========================================================= */


.values-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);



gap:1rem;


}




.value-card{


position:relative;


background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-md);



padding:

2rem 1.5rem;



text-align:center;



overflow:hidden;



transition:

all .4s var(--ease-premium);



}




.value-card::after{


content:"";


position:absolute;


width:120px;


height:120px;



background:

rgba(

255,

90,

0,

.15

);



border-radius:50%;



top:-60px;


right:-60px;



filter:blur(30px);



opacity:0;



transition:.4s;



}



.value-card:hover::after{


opacity:1;


}



.value-card:hover{


transform:

translateY(-8px);



background:

var(--color-primary);



color:white;



border-color:

var(--color-primary);



box-shadow:

var(--shadow-primary);



}




.value-icon{


font-size:2rem;


color:

var(--color-primary);



margin-bottom:

1rem;



transition:

all .3s ease;



}



.value-card:hover .value-icon{


color:white;


transform:

scale(1.15);



}




.value-card h4{


font-size:

1.05rem;


font-weight:

800;



}





/* =========================================================
   SERVICES SECTION
========================================================= */



.services-tabs{


display:flex;


gap:.75rem;



margin-bottom:

3rem;



overflow-x:auto;



padding-bottom:.5rem;



scrollbar-width:none;



}



.services-tabs::-webkit-scrollbar{


display:none;


}





.service-tab{


position:relative;


padding:

.85rem

1.7rem;



background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-full);



font-weight:

700;



font-size:

.9rem;



color:

var(--color-text-secondary);



white-space:nowrap;



transition:

all .35s var(--ease-premium);



}




.service-tab:hover{


border-color:

var(--color-primary);



color:

var(--color-primary);



transform:

translateY(-3px);



}





.service-tab.active{


background:

var(--gradient-primary);



color:white;



border-color:

transparent;



box-shadow:

var(--shadow-primary);



}




/* =========================================================
   SERVICE GRID
========================================================= */


.services-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(280px,1fr)
);



gap:

1.5rem;



}




.service-card{


position:relative;



background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-lg);



padding:

2.2rem;



overflow:hidden;



transition:

all .45s var(--ease-premium);



}





.service-card::before{


content:"";


position:absolute;


top:0;


left:0;


width:100%;


height:4px;



background:

var(--gradient-primary);



transform:

scaleX(0);



transform-origin:left;



transition:

transform .45s var(--ease-premium);



}




.service-card:hover::before{


transform:

scaleX(1);



}





.service-card::after{


content:"";


position:absolute;


width:180px;


height:180px;



background:

rgba(

255,

90,

0,

.12

);



border-radius:50%;



right:-90px;


bottom:-90px;



filter:blur(40px);



opacity:0;



transition:.5s;



}




.service-card:hover::after{


opacity:1;


}




.service-card:hover{


transform:

translateY(-12px);



box-shadow:

var(--shadow-lg);



border-color:

rgba(

255,

90,

0,

.25

);



}




.service-icon{


width:

64px;


height:

64px;



display:flex;


align-items:center;


justify-content:center;



background:

rgba(

255,

90,

0,

.1

);



color:

var(--color-primary);



border-radius:

var(--radius-md);



font-size:

1.5rem;



margin-bottom:

1.5rem;



transition:

all .4s var(--ease-premium);



}





.service-card:hover .service-icon{


background:

var(--gradient-primary);



color:white;



transform:

rotate(-8deg)
scale(1.1);



}





.service-card h3{


font-size:

1.2rem;


font-weight:

850;



margin-bottom:

.8rem;



}




.service-card p{


font-size:

.9rem;



color:

var(--color-text-secondary);



line-height:

1.8;



margin-bottom:

1.5rem;



}





.service-link{


display:inline-flex;


align-items:center;


gap:.5rem;



color:

var(--color-primary);



font-weight:

700;



transition:

gap .3s ease;



}



.service-link:hover{


gap:1rem;


}





/* =========================================================
   WHY CHOOSE UNO
========================================================= */



.section-dark{


background:

var(--color-surface);



}





.why-grid{


display:grid;


grid-template-columns:

repeat(3,1fr);



gap:

1.5rem;



}




.why-card{


background:

var(--color-bg);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-lg);



padding:

3rem 2rem;



text-align:center;



transition:

all .45s var(--ease-premium);



}




.why-card:hover{


transform:

translateY(-10px);



border-color:

var(--color-primary);



box-shadow:

var(--shadow-lg);



}





.why-icon{


width:

74px;


height:

74px;



display:flex;


align-items:center;


justify-content:center;



margin:

0 auto 1.5rem;



background:

rgba(

255,

90,

0,

.1

);



border-radius:

50%;



color:

var(--color-primary);



font-size:

1.8rem;



transition:

all .4s ease;



}





.why-card:hover .why-icon{


background:

var(--gradient-primary);



color:white;



transform:

scale(1.1);



}





.why-card h3{


font-size:

1.35rem;


font-weight:

850;



margin-bottom:

1rem;



}





.why-card p{


color:

var(--color-text-secondary);



line-height:

1.8;



}





/* =========================================================
   RESPONSIVE
========================================================= */



@media(max-width:1200px){


.about-grid{


grid-template-columns:

1fr 1fr;


}



.about-main{


grid-column:

span 2;


}


}




@media(max-width:992px){


.values-grid{


grid-template-columns:

repeat(2,1fr);


}



.why-grid{


grid-template-columns:

repeat(2,1fr);


}



}




@media(max-width:768px){


.about-grid,


.values-grid,


.why-grid{


grid-template-columns:

1fr;


}



.about-main{


grid-column:

auto;


}



}
/* =========================================================
   UNO CSS V2.0

   PART 4

   PORTFOLIO
   PROJECT MODAL
   PROCESS
   STATISTICS
   TESTIMONIALS

========================================================= */


/* =========================================================
   PORTFOLIO CONTROLS
========================================================= */


.portfolio-controls{


display:flex;


align-items:center;


justify-content:space-between;


gap:1.5rem;



margin-bottom:

3rem;



flex-wrap:wrap;



}





.portfolio-filters{


display:flex;


gap:.7rem;



flex-wrap:wrap;


}




.filter-btn{


padding:

.7rem

1.4rem;



background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-full);



font-weight:

700;



font-size:.85rem;



color:

var(--color-text-secondary);



transition:

all .35s var(--ease-premium);



}




.filter-btn:hover{


color:

var(--color-primary);



border-color:

var(--color-primary);



transform:

translateY(-3px);



}




.filter-btn.active{


background:

var(--gradient-primary);



color:white;



border-color:

transparent;



box-shadow:

var(--shadow-primary);



}





/* =========================================================
   PORTFOLIO SEARCH
========================================================= */


.portfolio-search{


position:relative;



min-width:

280px;



}




.portfolio-search input{


width:100%;



padding:

1rem

1.2rem

1rem

3rem;



background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-full);



font-size:.9rem;



transition:

all .35s ease;



}




.portfolio-search input:focus{


outline:none;



border-color:

var(--color-primary);



box-shadow:

0 0 0 5px

rgba(
255,
90,
0,
.12
);



}





.portfolio-search svg{


position:absolute;


left:1.2rem;


top:50%;


transform:

translateY(-50%);



color:

var(--color-text-muted);



}



[dir="ltr"]

.portfolio-search input{


padding:

1rem

3rem

1rem

1.2rem;



}



[dir="ltr"]

.portfolio-search svg{


left:auto;


right:1.2rem;


}



/* =========================================================
   PORTFOLIO GRID
========================================================= */


.portfolio-grid{


display:grid;


grid-template-columns:

repeat(
auto-fit,
minmax(310px,1fr)
);



gap:

2rem;



}





.portfolio-card{


background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--color-radius-lg);



overflow:hidden;



transition:

all .5s var(--ease-premium);



position:relative;



}




.portfolio-card:hover{


transform:

translateY(-12px);



box-shadow:

var(--shadow-xl);



border-color:

rgba(
255,
90,
0,
.3
);



}





/* Image */


.portfolio-image{


position:relative;


overflow:hidden;


aspect-ratio:

16/11;



}





.portfolio-image img{


width:100%;


height:100%;


object-fit:cover;



transition:

transform .7s var(--ease-premium);



}





.portfolio-card:hover

.portfolio-image img{


transform:

scale(1.08);



}





/* Overlay */


.portfolio-overlay{


position:absolute;


inset:0;



background:

linear-gradient(

135deg,

rgba(
255,
90,
0,
.9
),

rgba(
255,
122,
26,
.75
)

);



display:flex;


align-items:center;


justify-content:center;



opacity:0;



transition:

opacity .4s ease;



}





.portfolio-card:hover

.portfolio-overlay{


opacity:1;


}





.portfolio-view{


padding:

.8rem

1.8rem;



background:white;



color:

var(--color-primary);



border-radius:

var(--radius-full);



font-weight:

800;



transform:

translateY(20px);



transition:

all .4s var(--ease-premium);



}




.portfolio-card:hover

.portfolio-view{


transform:none;


}




.portfolio-view:hover{


transform:

scale(1.08);



}




/* Info */


.portfolio-info{


padding:

1.5rem;



}




.portfolio-category{


display:inline-flex;



padding:

.35rem

.9rem;



background:

rgba(
255,
90,
0,
.1
);



color:

var(--color-primary);



border-radius:

var(--radius-full);



font-size:.75rem;



font-weight:700;



margin-bottom:.8rem;



}





.portfolio-info h3{


font-size:

1.25rem;



font-weight:

850;



}





/* =========================================================
   PROJECT MODAL
========================================================= */


.modal{


position:fixed;


inset:0;


z-index:

var(--z-modal);



display:none;


align-items:center;


justify-content:center;



padding:2rem;



}





.modal.active{


display:flex;



}




.modal-overlay{


position:absolute;


inset:0;


background:

rgba(
0,
0,
0,
.75
);



backdrop-filter:

blur(12px);



}





.modal-content{


position:relative;



width:100%;


max-width:

950px;



max-height:

90vh;



overflow:auto;



background:

var(--color-surface);



border-radius:

var(--radius-xl);



box-shadow:

var(--shadow-xl);



animation:

modalShow .45s var(--ease-premium);



}





@keyframes modalShow{


from{


opacity:0;


transform:

scale(.9)
translateY(30px);



}


to{


opacity:1;


transform:none;


}


}





.modal-close{


position:absolute;


top:1.2rem;


right:1.2rem;



width:

44px;


height:

44px;



border-radius:50%;



background:

var(--color-bg);



display:flex;


align-items:center;


justify-content:center;



z-index:2;



transition:.3s;



}




.modal-close:hover{


background:

var(--color-primary);



color:white;



}





.modal-project{


padding:

2.5rem;



}





.modal-image{


width:100%;



border-radius:

var(--radius-lg);



margin-bottom:

2rem;



aspect-ratio:

16/9;



object-fit:cover;



}





.modal-project h2{


font-size:

2rem;



font-weight:

900;



margin-bottom:

1rem;



}





.modal-meta{


display:flex;


gap:.7rem;


flex-wrap:wrap;


margin-bottom:

1.5rem;



}





.modal-tag{


padding:

.4rem

1rem;



background:

rgba(
255,
90,
0,
.1
);



color:

var(--color-primary);



border-radius:

var(--radius-full);



font-size:.8rem;


font-weight:700;



}





.modal-description{


color:

var(--color-text-secondary);



line-height:

1.9;



}





/* =========================================================
   PROCESS TIMELINE
========================================================= */


.process-timeline{


position:relative;


max-width:

1100px;


margin:auto;



}





.process-line{


position:absolute;


top:

45px;



left:0;


right:0;



height:

4px;



background:

var(--gradient-primary);



border-radius:

20px;



}




.process-steps{


display:flex;


justify-content:space-between;



gap:1rem;



position:relative;



}





.process-step{


flex:1;


text-align:center;



}





.step-number{


width:

90px;


height:

90px;



margin:

0 auto 1.5rem;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



background:

var(--color-surface);



border:

4px solid

var(--color-primary);



color:

var(--color-primary);



font-size:

1.5rem;



font-weight:

900;



position:relative;



z-index:2;



transition:.4s;



}




.process-step:hover .step-number{


background:

var(--gradient-primary);



color:white;



transform:

scale(1.1);



}





.process-step h3{


font-size:

1.1rem;


font-weight:

850;



margin-bottom:.5rem;



}





.process-step p{


font-size:.9rem;



color:

var(--color-text-secondary);



}





/* =========================================================
   STATISTICS
========================================================= */


.section-gradient{


background:

var(--gradient-primary);



color:white;



}





.section-gradient

.section-title,
.section-gradient

.section-desc,
.section-gradient

.section-label{


color:white;


}





.stats-grid{


display:grid;


grid-template-columns:

repeat(4,1fr);



gap:

1.5rem;



}




.stat-card{


padding:

2.5rem 1.5rem;



background:

rgba(
255,
255,
255,
.12
);



border:

1px solid

rgba(
255,
255,
255,
.25
);



backdrop-filter:

blur(15px);



border-radius:

var(--radius-lg);



text-align:center;



transition:

all .4s ease;



}




.stat-card:hover{


transform:

translateY(-10px);



background:

rgba(
255,
255,
255,
.2
);



}





.counter{


font-size:

3rem;


font-weight:

950;



}





.stat-name{


opacity:.9;


}



/* =========================================================
   TESTIMONIALS
========================================================= */


.testimonials-slider{


max-width:

850px;



margin:auto;



overflow:hidden;



}





.testimonials-track{


display:flex;



transition:

transform .6s var(--ease-premium);



}




.testimonial-card{


min-width:

100%;



padding:

3rem;



background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-xl);



text-align:center;



}





.testimonial-rating{


display:flex;


justify-content:center;



gap:.3rem;



color:#FBBF24;



margin-bottom:

1.5rem;



}




.testimonial-text{


font-size:

1.2rem;



line-height:

1.9;



font-style:italic;



margin-bottom:

2rem;



}





.testimonial-author{


display:flex;


justify-content:center;



align-items:center;



gap:1rem;



}





.author-avatar{


width:

55px;


height:

55px;



border-radius:50%;



background:

rgba(
255,
90,
0,
.1
);



color:

var(--color-primary);



display:flex;


align-items:center;


justify-content:center;



}





.testimonials-nav{


display:flex;


justify-content:center;



gap:1rem;



margin-top:

2rem;



}





.testimonial-prev,
.testimonial-next{


width:

45px;


height:

45px;



border-radius:50%;



background:

var(--color-surface);



border:

1px solid

var(--color-border);



transition:.3s;



}





.testimonial-prev:hover,
.testimonial-next:hover{


background:

var(--color-primary);



color:white;



}





/* =========================================================
   RESPONSIVE
========================================================= */


@media(max-width:992px){


.stats-grid{


grid-template-columns:

repeat(2,1fr);



}



.process-line{


display:none;


}



.process-steps{


flex-wrap:wrap;


}



.process-step{


flex:0 0 calc(50% - 1rem);


}



}



@media(max-width:600px){


.portfolio-search{


width:100%;


}



.stats-grid{


grid-template-columns:

1fr;



}



.process-step{


flex:100%;


}



.modal-project{


padding:

1.5rem;



}



}
/* =========================================================
   UNO CSS V2.0

   PART 5

   CONTACT
   FORM
   FOOTER
   SCROLL TOP

========================================================= */


/* =========================================================
   CONTACT SECTION
========================================================= */


.contact-grid{


display:grid;


grid-template-columns:

1fr 1.25fr;



gap:

5rem;



align-items:start;



}





.contact-info .section-header{


text-align:start;


margin-bottom:

3rem;



}



[dir="rtl"]

.contact-info .section-header{


text-align:right;


}





.contact-details{


display:flex;


flex-direction:column;


gap:

1.5rem;



}





.contact-item{


display:flex;


align-items:flex-start;


gap:

1rem;



padding:

1.2rem;



background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-lg);



transition:

all .4s var(--ease-premium);



}





.contact-item:hover{


transform:

translateX(8px);



border-color:

var(--color-primary);



box-shadow:

var(--shadow-md);



}



[dir="rtl"]

.contact-item:hover{


transform:

translateX(-8px);


}





.contact-icon{


width:

50px;


height:

50px;



min-width:

50px;



display:flex;


align-items:center;


justify-content:center;



background:

rgba(
255,
90,
0,
.1
);



color:

var(--color-primary);



border-radius:

var(--radius-md);



font-size:

1.2rem;



transition:

all .35s ease;



}





.contact-item:hover .contact-icon{


background:

var(--gradient-primary);



color:white;



transform:

scale(1.1);



}





.contact-item h4{


font-size:

1rem;



font-weight:

800;



margin-bottom:

.3rem;



}





.contact-item a,
.contact-item span{


color:

var(--color-text-secondary);



font-size:.95rem;



}





.contact-item a:hover{


color:

var(--color-primary);



}





/* =========================================================
   CONTACT FORM
========================================================= */


.contact-form-wrapper{


background:

var(--color-surface);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-xl);



padding:

3rem;



box-shadow:

var(--shadow-md);



position:relative;



overflow:hidden;



}





.contact-form-wrapper::before{


content:"";


position:absolute;


width:

250px;


height:

250px;



background:

rgba(
255,
90,
0,
.12
);



border-radius:

50%;



top:

-120px;


right:

-120px;



filter:

blur(50px);



}





.contact-form{


display:flex;


flex-direction:column;



gap:

1.5rem;



position:relative;


z-index:1;



}





.form-row{


display:grid;


grid-template-columns:

1fr 1fr;



gap:

1.5rem;



}





.form-group{


display:flex;


flex-direction:column;


gap:

.6rem;



}





.form-group label{


font-size:

.9rem;



font-weight:

750;



color:

var(--color-text);



}





.form-group input,
.form-group textarea,
.form-group select{


width:100%;



padding:

1rem

1.2rem;



background:

var(--color-bg);



border:

1px solid

var(--color-border);



border-radius:

var(--radius-md);



font-size:

.95rem;



transition:

all .35s var(--ease-premium);



}





.form-group input::placeholder,
.form-group textarea::placeholder{


color:

var(--color-text-muted);



}





.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{


outline:none;



border-color:

var(--color-primary);



background:

var(--color-surface);



box-shadow:

0 0 0 5px

rgba(
255,
90,
0,
.12
);



}





.form-group textarea{


min-height:

150px;



resize:

vertical;



}





.form-group select{


cursor:pointer;



}





/* Error */


.error-message{


display:none;


font-size:

.8rem;



color:

#EF4444;



}





.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select{


border-color:

#EF4444;



}





.form-group.has-error .error-message{


display:block;



}





.btn-submit{


width:100%;



padding:

1rem;



font-size:

1rem;



}



/* =========================================================
   FORM SUCCESS
========================================================= */


.form-success{


display:none;



text-align:center;



padding:

3rem;



}





.form-success.show{


display:block;


animation:

fadeUp .6s ease;



}





.success-icon{


width:

80px;


height:

80px;



margin:

0 auto 1.5rem;



display:flex;


align-items:center;


justify-content:center;



border-radius:50%;



background:

rgba(
34,
197,
94,
.15
);



color:

#22C55E;



font-size:

2rem;



}





.form-success h3{


font-size:

1.7rem;



font-weight:

900;



margin-bottom:

.7rem;



}





.form-success p{


color:

var(--color-text-secondary);



}





/* =========================================================
   FOOTER
========================================================= */


.footer{


background:

#0F1115;



color:

white;



padding:

5rem 0 0;



position:relative;



overflow:hidden;



}




.footer::before{


content:"";


position:absolute;


width:

500px;


height:

500px;



background:

rgba(
255,
90,
0,
.12
);



border-radius:

50%;



top:

-250px;


right:

-200px;



filter:

blur(100px);



}





.footer-grid{


display:grid;


grid-template-columns:

1.6fr 1fr 1fr 1fr;



gap:

3rem;



padding-bottom:

3rem;



border-bottom:

1px solid

rgba(
255,
255,
255,
.1
);



position:relative;



}





.footer-logo{


display:flex;


align-items:center;


gap:

.8rem;



font-size:

1.3rem;



font-weight:

900;



margin-bottom:

1.5rem;



}





.footer-logo img{


width:

55px;



}





.footer-about p{


color:

rgba(
255,
255,
255,
.65
);



line-height:

1.8;



font-size:

.95rem;



}





.footer-social{


display:flex;


gap:

.7rem;



margin-top:

1.5rem;



}





.social-link{


width:

42px;


height:

42px;



display:flex;


align-items:center;


justify-content:center;



border-radius:

50%;



background:

rgba(
255,
255,
255,
.08
);



color:white;



transition:

all .35s ease;



}





.social-link:hover{


background:

var(--color-primary);



transform:

translateY(-5px);



}





.footer-col h4{


font-size:

1.05rem;



font-weight:

850;



margin-bottom:

1.5rem;



}





.footer-links li{


margin-bottom:

.9rem;



}





.footer-links a{


color:

rgba(
255,
255,
255,
.65
);



transition:

color .3s ease;



}





.footer-links a:hover{


color:

var(--color-primary);



}





.footer-contact li{


display:flex;


gap:

.8rem;



margin-bottom:

1rem;



color:

rgba(
255,
255,
255,
.7
);



}





.footer-contact svg{


color:

var(--color-primary);



}





.footer-bottom{


padding:

1.5rem 0;



text-align:center;



}





.footer-bottom p{


color:

rgba(
255,
255,
255,
.5
);



font-size:

.85rem;



}





/* =========================================================
   SCROLL TO TOP
========================================================= */


.scroll-top{


position:fixed;


bottom:

2rem;


right:

2rem;



width:

52px;


height:

52px;



border-radius:

50%;



background:

var(--gradient-primary);



color:white;



display:flex;


align-items:center;


justify-content:center;



z-index:

var(--z-scroll);



opacity:0;



visibility:hidden;



transform:

translateY(20px);



transition:

all .4s var(--ease-premium);



box-shadow:

var(--shadow-primary);



}





[dir="ltr"]

.scroll-top{


right:auto;


left:2rem;



}





.scroll-top.visible{


opacity:1;



visibility:visible;



transform:none;



}





.scroll-top:hover{


transform:

translateY(-8px);



}





/* =========================================================
   RESPONSIVE
========================================================= */


@media(max-width:992px){


.contact-grid{


grid-template-columns:

1fr;



gap:

3rem;



}



.footer-grid{


grid-template-columns:

repeat(2,1fr);



}



}





@media(max-width:600px){


.contact-form-wrapper{


padding:

1.5rem;



}



.form-row{


grid-template-columns:

1fr;



}



.footer-grid{


grid-template-columns:

1fr;



}



.footer-about{


text-align:center;



}



.footer-social{


justify-content:center;



}



.scroll-top{


width:

45px;


height:

45px;



bottom:

1rem;


right:

1rem;



}



}
/* =========================================================
   UNO CSS V2.0

   PART 6 FINAL

   RESPONSIVE
   ACCESSIBILITY
   PERFORMANCE
   UTILITIES

========================================================= */


/* =========================================================
   LARGE DEVICES
========================================================= */


@media(max-width:1200px){


:root{

--container-max:1100px;

}



.hero-title{

font-size:3rem;

}



.hero-container{

gap:3rem;

}



.services-grid{

grid-template-columns:

repeat(3,1fr);

}



.portfolio-grid{

grid-template-columns:

repeat(3,1fr);

}



.footer-grid{

gap:2rem;

}



}



/* =========================================================
   TABLETS
========================================================= */


@media(max-width:992px){



:root{

--section-padding:4rem;

--container-padding:1.5rem;

}



.section-title{

font-size:2rem;

}



.hero{

min-height:auto;

padding-top:120px;

padding-bottom:5rem;

}



.hero-container{


grid-template-columns:1fr;


text-align:center;


}



.hero-content{

order:2;

}



.hero-image{

order:1;

}



.hero-subtitle{


margin-left:auto;

margin-right:auto;


}



.hero-buttons{


justify-content:center;


}



.hero-stats{


justify-content:center;


}



.about-grid{


grid-template-columns:

repeat(2,1fr);


}



.services-grid{


grid-template-columns:

repeat(2,1fr);


}



.portfolio-grid{


grid-template-columns:

repeat(2,1fr);


}



.values-grid{


grid-template-columns:

repeat(2,1fr);


}



.why-grid{


grid-template-columns:

repeat(2,1fr);


}



.process-steps{


flex-wrap:wrap;


}



.process-step{


flex:

0 0 calc(50% - 1rem);


}



.stats-grid{


grid-template-columns:

repeat(2,1fr);


}



.blog-grid{


grid-template-columns:

1fr;


}



.contact-grid{


grid-template-columns:

1fr;


}



.footer-grid{


grid-template-columns:

repeat(2,1fr);


}



}



/* =========================================================
   MOBILE
========================================================= */


@media(max-width:768px){



:root{

--container-padding:1rem;

--section-padding:3.5rem;

}



html{

font-size:15px;

}



.section-title{


font-size:1.75rem;


}



.section-desc{


font-size:1rem;


}




/* Header */


.header{


padding:.8rem 0;


}



.logo img{


width:45px;


}





/* Hero */


.hero-title{


font-size:

2.1rem;


}



.hero-subtitle{


font-size:

1rem;


}



.hero-buttons{


flex-direction:column;


}



.hero-buttons .btn{


width:100%;


}



.hero-stats{


gap:1.5rem;

flex-wrap:wrap;


}



.stat-item{


justify-content:center;


}



/* Cards */


.about-grid,
.services-grid,
.portfolio-grid,
.values-grid,
.why-grid{


grid-template-columns:

1fr;


}



.about-card,
.service-card,
.why-card{


padding:1.5rem;


}





/* Portfolio */


.portfolio-controls{


flex-direction:column;


align-items:stretch;


}



.portfolio-filters{


overflow-x:auto;


flex-wrap:nowrap;


padding-bottom:.5rem;


}



.filter-btn{


flex-shrink:0;


}





/* Process */


.process-step{


flex:

0 0 100%;


}



.step-number{


width:65px;


height:65px;


}



/* Statistics */


.stats-grid{


grid-template-columns:

1fr;


}



.counter{


font-size:

2rem;


}




/* Contact */


.contact-form-wrapper{


padding:

1.5rem;


}



.form-row{


grid-template-columns:

1fr;


}





/* Footer */


.footer{


text-align:center;


}



.footer-grid{


grid-template-columns:

1fr;


}



.footer-contact li{


justify-content:center;


}



.footer-social{


justify-content:center;


}




}



/* =========================================================
   SMALL MOBILE
========================================================= */


@media(max-width:480px){



.hero-title{


font-size:

1.75rem;


}



.hero-badge{


font-size:.75rem;


}



.btn{


padding:

.7rem 1.2rem;


}



.section{


padding:

3rem 0;


}



.service-tabs{


gap:.3rem;


}



.service-tab{


padding:

.65rem 1rem;


font-size:.8rem;


}



.testimonial-card{


padding:

1.2rem;


}



.testimonial-text{


font-size:

.95rem;


}



.modal{


padding:

.5rem;


}



.modal-content{


border-radius:

var(--radius-lg);


}



.modal-project{


padding:

1.25rem;


}



.scroll-top{


width:

42px;


height:

42px;


}



}





/* =========================================================
   RTL / LTR FINAL FIXES
========================================================= */



[dir="rtl"]{

text-align:right;

}



[dir="ltr"]{

text-align:left;

}



[dir="rtl"] .hero-buttons,
[dir="rtl"] .header-actions{


direction:rtl;


}



[dir="ltr"] .hero-buttons,
[dir="ltr"] .header-actions{


direction:ltr;


}



/* =========================================================
   ACCESSIBILITY
========================================================= */



*:focus-visible{


outline:

3px solid var(--color-primary);



outline-offset:

4px;



}



button:disabled,
input:disabled{


opacity:.6;


cursor:not-allowed;


}




.sr-only{


position:absolute;


width:1px;


height:1px;


padding:0;


margin:-1px;


overflow:hidden;


clip:rect(0,0,0,0);


white-space:nowrap;


border:0;


}





/* =========================================================
   PERFORMANCE OPTIMIZATION
========================================================= */


.hero-image,
.float-el,
.service-card,
.portfolio-card,
.about-card{


will-change:transform;


}



img{


content-visibility:auto;


}



/* =========================================================
   REDUCED MOTION
========================================================= */


@media(prefers-reduced-motion:reduce){



*,
*::before,
*::after{


animation-duration:

.01ms!important;


animation-iteration-count:

1!important;


transition-duration:

.01ms!important;


scroll-behavior:

auto!important;


}



}





/* =========================================================
   SELECTION STYLE
========================================================= */


::selection{


background:

var(--color-primary);


color:white;


}



/* =========================================================
   PRINT VERSION
========================================================= */


@media print{



*{


background:white!important;


color:black!important;


box-shadow:none!important;


}



.header,
.footer,
.preloader,
.scroll-top,
.mobile-menu-toggle,
.floating-elements{


display:none!important;


}



.section{


padding:

2rem 0;


}



a{


text-decoration:underline;


}



}



/* =========================================================
   FINAL UTILITY CLASSES
========================================================= */


.text-primary{

color:

var(--color-primary)!important;

}



.text-center{

text-align:center!important;

}



.hidden{

display:none!important;

}



.flex{

display:flex!important;

}



.flex-center{

display:flex;

align-items:center;

justify-content:center;

}



.relative{

position:relative;

}



.overflow-hidden{

overflow:hidden;

}



.rounded{

border-radius:

var(--radius-lg);

}



.shadow{

box-shadow:

var(--shadow-lg);

}



/* =========================================================
   END UNO TECHNOLOGY SERVICES CSS V2.0
   PREMIUM CORPORATE FRAMEWORK
========================================================= */