/*==================================================
SHATR Platform
Official Style
Version 2.0 Final
==================================================*/



/*==================================================
ROOT
==================================================*/

:root{

--primary:#12B5FF;

--primaryDark:#0678C8;

--accent:#FFD54A;

--accentDark:#F4C21F;

--white:#FFFFFF;

--background:#F6FAFD;

--text:#1E293B;

--textLight:#64748B;

--border:#E2E8F0;

--shadow:

0 12px 35px rgba(0,0,0,.08);

--radius:22px;

--speed:.35s;

}



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

*{

margin:0;

padding:0;

box-sizing:border-box;

-webkit-tap-highlight-color:transparent;

}



html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}



body{

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

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.8;

animation:pageFade .6s ease;

}



/*==================================================
BACKGROUND
==================================================*/

.background{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:-1;

background:

radial-gradient(

circle at top left,

rgba(18,181,255,.10),

transparent 35%

),

radial-gradient(

circle at bottom right,

rgba(255,213,74,.12),

transparent 30%

),

var(--background);

}



/*==================================================
GENERAL
==================================================*/

img{

display:block;

max-width:100%;

user-select:none;

-webkit-user-drag:none;

}



a{

text-decoration:none;

}



button{

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

cursor:pointer;

border:none;

background:none;

}



button,

a,

img{

transition:all var(--speed);

}



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

.page{

width:100%;

}



.container{

width:min(1180px,92%);

margin:auto;

}

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

.header{

position:sticky;

top:0;

z-index:1000;

background:

linear-gradient(

90deg,

rgba(18,181,255,.96),

rgba(6,120,200,.96)

);

backdrop-filter:blur(14px);

box-shadow:

0 10px 30px rgba(18,181,255,.20);

}



.header .container{

display:flex;

align-items:center;

justify-content:space-between;

padding:16px 0;

}



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

.logoBox{

display:flex;

align-items:center;

gap:16px;

}



.headerLogo{

width:58px;

height:58px;

border-radius:50%;

background:white;

padding:5px;

box-shadow:

0 10px 25px rgba(0,0,0,.15);

animation:logoPulse 8s ease-in-out infinite;

}



.headerLogo:hover{

transform:scale(1.08);

box-shadow:

0 0 25px rgba(18,181,255,.45),

0 12px 30px rgba(0,0,0,.15);

}



.logoBox h1{

font-size:34px;

font-weight:800;

color:white;

letter-spacing:2px;

}



.logoBox p{

font-size:14px;

color:rgba(255,255,255,.88);

margin-top:2px;

}



/*==================================================
HEADER BUTTONS
==================================================*/

.headerButtons{

display:flex;

align-items:center;

gap:12px;

}



.headerBtn{

padding:12px 22px;

border-radius:16px;

background:rgba(255,255,255,.15);

border:1px solid rgba(255,255,255,.20);

color:white;

font-size:15px;

font-weight:700;

}



.headerBtn:hover{

background:white;

color:var(--primaryDark);

transform:translateY(-3px);

}



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

.hero{

padding:70px 0;

position:relative;

overflow:hidden;

}



.hero::before{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:rgba(18,181,255,.08);

top:-120px;

left:-100px;

filter:blur(8px);

}



.hero::after{

content:"";

position:absolute;

width:220px;

height:220px;

border-radius:50%;

background:rgba(255,213,74,.15);

bottom:-90px;

right:-70px;

filter:blur(10px);

}



.heroContainer{

display:flex;

align-items:center;

justify-content:space-between;

gap:35px;

}



/*==================================================
HERO TEXT
==================================================*/

.heroText{

flex:1.15;

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

backdrop-filter:blur(15px);

padding:40px;

border-radius:30px;

box-shadow:

0 25px 60px rgba(18,181,255,.12);

border:

1px solid rgba(255,255,255,.55);

}



.badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:#E7F8FF;

color:var(--primaryDark);

font-size:14px;

font-weight:700;

margin-bottom:22px;

}



.heroText h2{

font-size:56px;

font-weight:800;

line-height:1.25;

margin-bottom:22px;

}



.heroText p{

font-size:19px;

line-height:2;

color:var(--textLight);

max-width:560px;

}

/*==================================================
BUTTONS
==================================================*/

.heroButtons{

display:flex;

flex-direction:column;

gap:16px;

margin-top:35px;

}



.heroButtonsTop{

display:flex;

gap:16px;

width:100%;

}



.heroButtonsTop .mainBtn,

.heroButtonsTop .secondBtn{

flex:1;

display:flex;

align-items:center;

justify-content:center;

}



.heroFullBtn{

width:100%;

display:flex;

align-items:center;

justify-content:center;

}



.mainBtn{

padding:17px 32px;

border-radius:18px;

background:

linear-gradient(

135deg,

var(--primary),

var(--primaryDark)

);

color:white;

font-size:18px;

font-weight:700;

box-shadow:

0 18px 35px rgba(18,181,255,.30);

}



.mainBtn:hover{

transform:translateY(-4px);

box-shadow:

0 25px 45px rgba(18,181,255,.35);

}



.secondBtn{

padding:17px 32px;

border-radius:18px;

border:2px solid var(--primary);

background:white;

color:var(--primaryDark);

font-size:18px;

font-weight:700;

}



.secondBtn:hover{

background:var(--primary);

color:white;

transform:translateY(-4px);

}



.thirdBtn{

padding:17px 32px;

border-radius:18px;

background:

linear-gradient(

135deg,

var(--accent),

var(--accentDark)

);

color:#4A3412;

font-size:18px;

font-weight:800;

box-shadow:

0 18px 35px rgba(255,213,74,.30);

}



.thirdBtn:hover{

transform:translateY(-4px);

box-shadow:

0 25px 45px rgba(255,213,74,.40);

}


/*==================================================
SHOWCASE
==================================================*/

.heroImage{

flex:.90;

display:flex;

justify-content:center;

align-items:flex-start;

position:relative;

margin-top:-25px;

}


.tabletFrame{

position:relative;

width:690px;

height:470px;

background:white;

border-radius:34px;

padding:12px;

box-shadow:

0 40px 90px rgba(0,0,0,.12);

overflow:hidden;

}



.tabletFrame::before{

content:"";

position:absolute;

top:16px;

left:50%;

transform:translateX(-50%);

width:90px;

height:8px;

border-radius:30px;

background:#D8E2EC;

z-index:50;

}



.showcase{

position:relative;

width:100%;

height:100%;

border-radius:24px;

overflow:hidden;

perspective:1600px;

background:#ffffff;

}



/*==================================================
SHOWCASE IMAGES
==================================================*/

.showcaseImage{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:contain;

opacity:0;

transform:

translateZ(-180px)

scale(.86);

filter:

blur(5px)

brightness(.82);

transition:

opacity .9s ease,

transform .9s ease,

filter .9s ease;

}



.showcaseImage.active{

opacity:1;

transform:

translateZ(0)

scale(1);

filter:

blur(0)

brightness(1);

z-index:20;

}

/*==================================================
SHOWCASE DEPTH
==================================================*/

.showcaseImage.prev{

opacity:.45;

transform:

translateX(-25px)

translateY(12px)

translateZ(-90px)

scale(.93)

rotate(-2deg);

filter:

blur(2px)

brightness(.90);

z-index:15;

}



.showcaseImage.next{

opacity:.45;

transform:

translateX(25px)

translateY(-12px)

translateZ(-90px)

scale(.93)

rotate(2deg);

filter:

blur(2px)

brightness(.90);

z-index:15;

}



.showcaseImage.hidden{

opacity:0;

transform:

translateZ(-220px)

scale(.82);

filter:

blur(8px)

brightness(.75);

z-index:1;

}



/*==================================================
QUICK SECTION
==================================================*/

.quickSection{

padding:30px 0 80px;

}



.quickTitle{

text-align:center;

margin-bottom:45px;

}



.quickTitle h2{

font-size:38px;

font-weight:800;

margin-bottom:15px;

}



.quickTitle p{

font-size:18px;

line-height:1.9;

color:var(--textLight);

max-width:650px;

margin:auto;

}



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

.quickGrid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:25px;

}



/*==================================================
CARD
==================================================*/

.quickCard{

position:relative;

overflow:hidden;

background:white;

border-radius:28px;

padding:35px 28px;

text-align:center;

box-shadow:var(--shadow);

cursor:pointer;

transition:all .35s ease;

}



.quickCard:hover{

transform:

translateY(-10px);

box-shadow:

0 30px 70px rgba(18,181,255,.18);

}



.quickCard::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:

linear-gradient(

90deg,

var(--primary),

var(--accent)

);

transform:scaleX(0);

transition:.4s;

}



.quickCard:hover::before{

transform:scaleX(1);

}



/*==================================================
ICON
==================================================*/

.quickIcon{

width:90px;

height:90px;

margin:auto;

margin-bottom:22px;

display:flex;

align-items:center;

justify-content:center;

border-radius:24px;

background:

linear-gradient(

135deg,

var(--primary),

var(--primaryDark)

);

font-size:42px;

color:white;

box-shadow:

0 18px 35px rgba(18,181,255,.25);

}



.quickCard:hover .quickIcon{

transform:

scale(1.12)

rotate(8deg);

}



.quickCard h3{

font-size:26px;

font-weight:800;

margin-bottom:14px;

}



.quickCard p{

font-size:17px;

line-height:1.9;

color:var(--textLight);

}

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

.footer{

margin-top:80px;

padding:55px 0 35px;

background:

linear-gradient(

180deg,

rgba(255,255,255,.96),

rgba(245,250,253,1)

);

border-top:

1px solid rgba(18,181,255,.12);

}



.footer .container{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}



.footerBrand{

display:flex;

align-items:center;

justify-content:center;

gap:18px;

margin-bottom:25px;

}



.footerLogo{

width:68px;

height:68px;

padding:6px;

border-radius:50%;

background:white;

box-shadow:

0 15px 35px rgba(0,0,0,.12);

animation:logoPulse 8s ease-in-out infinite;

}



.footerLogo:hover{

transform:

rotate(8deg)

scale(1.08);

}



.footerBrand h2{

font-size:34px;

font-weight:800;

color:var(--primaryDark);

margin-bottom:6px;

}



.footerBrand p{

font-size:16px;

line-height:1.9;

color:var(--textLight);

max-width:520px;

}



.footerLinks{

display:flex;

gap:15px;

flex-wrap:wrap;

justify-content:center;

margin:25px 0;

}



.footerLinks a{

padding:12px 22px;

border-radius:18px;

background:white;

color:var(--primaryDark);

font-weight:700;

box-shadow:

0 10px 25px rgba(0,0,0,.06);

}



.footerLinks a:hover{

background:

linear-gradient(

135deg,

var(--primary),

var(--primaryDark)

);

color:white;

transform:translateY(-4px);

}



.copyright{

font-size:14px;

color:#94A3B8;

margin-top:10px;

}



/*==================================================
POPUPS
==================================================*/

.popup{

position:fixed;

inset:0;

display:none;

align-items:center;

justify-content:center;

background:

rgba(15,23,42,.45);

backdrop-filter:blur(8px);

padding:25px;

z-index:9999;

}



.popup.active{

display:flex;

animation:fadeIn .25s ease;

}



.popup-box{

width:100%;

max-width:620px;

background:white;

border-radius:30px;

padding:38px;

box-shadow:

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

animation:popupUp .35s ease;

max-height:85vh;

overflow:auto;

}



.popup-box h2{

font-size:30px;

font-weight:800;

text-align:center;

margin-bottom:22px;

color:var(--primaryDark);

}



.popup-box p{

font-size:17px;

line-height:2;

color:var(--textLight);

margin-bottom:18px;

}



.popup-box ul{

padding-right:24px;

margin-bottom:18px;

}



.popup-box li{

margin-bottom:10px;

}



.popup-box input{

width:100%;

padding:16px 18px;

margin-bottom:15px;

border-radius:16px;

border:2px solid var(--border);

font-size:16px;

outline:none;

}



.popup-box input:focus{

border-color:var(--primary);

box-shadow:

0 0 0 5px rgba(18,181,255,.10);

}



.popup-box button,

.popup-btn{

width:100%;

padding:16px;

border:none;

border-radius:18px;

background:

linear-gradient(

135deg,

var(--primary),

var(--primaryDark)

);

color:white;

font-size:17px;

font-weight:700;

}



.popup-box button:hover,

.popup-btn:hover{

transform:translateY(-3px);

box-shadow:

0 18px 35px rgba(18,181,255,.28);

}



.closePopup{

display:block;

margin-top:22px;

text-align:center;

font-weight:700;

color:var(--textLight);

cursor:pointer;

}



.closePopup:hover{

color:var(--primaryDark);

}



#errorMsg{

display:none;

margin-top:15px;

text-align:center;

font-weight:700;

color:#EF4444;

}

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

@keyframes pageFade{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}



@keyframes popupUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}



@keyframes logoPulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1);

}

}



/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:11px;

}



::-webkit-scrollbar-track{

background:#EDF6FC;

}



::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

var(--primary),

var(--primaryDark)

);

border-radius:20px;

}



::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(

180deg,

var(--primaryDark),

#055E9C

);

}



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

::selection{

background:var(--primary);

color:white;

}



/*==================================================
HELPERS
==================================================*/

.hidden{

display:none !important;

}



.textCenter{

text-align:center;

}



.radius{

border-radius:var(--radius);

}



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

@media print{

.header,

.footer,

.heroButtons,

.quickSection,

.popup{

display:none !important;

}

body{

background:white;

}

}

/*==================================================
SHOWCASE FINAL EFFECTS
==================================================*/

.showcase{

position:relative;

isolation:isolate;

}



.showcase::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(255,255,255,.03),

transparent 18%,

transparent 82%,

rgba(0,0,0,.05)

);

pointer-events:none;

z-index:40;

}



.showcase::after{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:

radial-gradient(

circle at top,

rgba(255,255,255,.18),

transparent 45%

);

pointer-events:none;

z-index:41;

}



/*==================================================
TABLET SHADOW
==================================================*/

.tabletFrame{

transition:

transform .45s ease,

box-shadow .45s ease;

}



.tabletFrame:hover{

transform:

translateY(-6px)

rotateX(2deg);

box-shadow:

0 55px 120px rgba(18,181,255,.18);

}



/*==================================================
SHOWCASE IMAGE
==================================================*/

.showcaseImage{

backface-visibility:hidden;

will-change:

transform,

opacity,

filter;

user-select:none;

pointer-events:none;

}



/*==================================================
ACTIVE IMAGE
==================================================*/

.showcaseImage.active{

animation:

showcaseFloat 4s ease-in-out infinite;

}



/*==================================================
FLOAT ANIMATION
==================================================*/

@keyframes showcaseFloat{

0%{

transform:

translateY(0)

scale(1);

}

25%{

transform:

translateY(-5px)

scale(1.01);

}

50%{

transform:

translateY(0)

scale(1.02);

}

75%{

transform:

translateY(5px)

scale(1.01);

}

100%{

transform:

translateY(0)

scale(1);

}

}



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

.heroImage,

.tabletFrame,

.showcase,

.showcaseImage{

transform-style:

preserve-3d;

}



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

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

.showcaseImage,

.tabletFrame,

.headerLogo,

.footerLogo,

.quickCard,

.mainBtn,

.secondBtn,

.thirdBtn{

animation:none !important;

transition:none !important;

}

}



/*==================================================
THE END
==================================================*/