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

Mr.aiwithmahdi Studio

About Page Stylesheet

Author : Mahdi Gholami

Version : 1.0

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



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

:root{

--primary:#d4af37;

--primary-light:#f7d774;

--dark:#070707;

--dark2:#111111;

--dark3:#181818;

--white:#ffffff;

--gray:#bdbdbd;

--gray2:#888888;

--glass:rgba(255,255,255,.06);

--glass2:rgba(255,255,255,.03);

--border:rgba(255,255,255,.08);

--shadow:0 30px 80px rgba(0,0,0,.35);

--radius:22px;

--transition:.45s ease;

--max-width:1350px;

}



*{

margin:0;

padding:0;

box-sizing:border-box;

scroll-behavior:smooth;

}



html{

overflow-x:hidden;

}



body{

background:linear-gradient(180deg,#050505,#0b0b0b,#070707);

font-family:"Vazirmatn",sans-serif;

color:#fff;

overflow-x:hidden;

line-height:2;

position:relative;

}



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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050505;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--primary),#987415);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:#ffe28a;

}



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

::selection{

background:var(--primary);

color:#000;

}



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

body::before{

content:"";

position:fixed;

left:-300px;

top:-300px;

width:700px;

height:700px;

background:radial-gradient(circle,

rgba(212,175,55,.18),

transparent 70%);

filter:blur(80px);

z-index:-2;

}



body::after{

content:"";

position:fixed;

right:-250px;

bottom:-250px;

width:650px;

height:650px;

background:radial-gradient(circle,

rgba(212,175,55,.08),

transparent 70%);

filter:blur(90px);

z-index:-2;

}



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

.container{

width:min(92%,var(--max-width));

margin:auto;

}



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

section{

padding:120px 0;

position:relative;

}



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

.section-name{

color:var(--primary);

font-size:.9rem;

letter-spacing:5px;

text-transform:uppercase;

margin-bottom:15px;

font-weight:700;

}



section h2{

font-size:3rem;

font-weight:900;

margin-bottom:30px;

line-height:1.3;

}



section h2 span{

color:var(--primary);

}



section p{

font-size:1.08rem;

color:#d4d4d4;

margin-bottom:25px;

}



/*==============================
LINK
==============================*/

a{

text-decoration:none;

color:white;

transition:var(--transition);

}



img{

max-width:100%;

display:block;

}



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

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding-top:150px;

padding-bottom:120px;

position:relative;

overflow:hidden;

}



.hero::before{

content:"";

position:absolute;

width:550px;

height:550px;

background:

radial-gradient(circle,

rgba(212,175,55,.18),

transparent 70%);

filter:blur(60px);

z-index:-1;

}



.hero-content{

max-width:900px;

}



.mini-title{

color:var(--primary);

font-size:14px;

letter-spacing:8px;

margin-bottom:25px;

}



.hero h1{

font-size:4.4rem;

font-weight:900;

line-height:1.2;

margin-bottom:35px;

}



.hero h1 span{

color:var(--primary);

display:block;

}



.hero p{

font-size:1.2rem;

max-width:760px;

margin:auto;

margin-bottom:45px;

color:#d0d0d0;

}



.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 42px;

background:linear-gradient(135deg,

var(--primary),

#8d6b12);

border-radius:60px;

font-weight:700;

box-shadow:0 20px 60px rgba(212,175,55,.28);

transition:.45s;

}



.hero-btn:hover{

transform:translateY(-8px);

box-shadow:0 35px 70px rgba(212,175,55,.35);

}
/*==================================================

SECTION : STORY

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

.story,
.brand-philosophy,
.founder,
.brand-values{

position:relative;

overflow:hidden;

}



.story::before,
.brand-philosophy::before,
.founder::before{

content:"";

position:absolute;

top:50%;

left:-250px;

width:450px;

height:450px;

border-radius:50%;

background:radial-gradient(circle,

rgba(212,175,55,.08),

transparent 70%);

filter:blur(70px);

pointer-events:none;

z-index:-1;

}



.story .container,
.brand-philosophy .container,
.founder .container{

max-width:1050px;

}



.story h2,
.brand-philosophy h2,
.founder h2{

margin-bottom:35px;

}



.story p,
.brand-philosophy p,
.founder p{

font-size:1.12rem;

line-height:2.2;

color:#d6d6d6;

margin-bottom:28px;

}



.story strong,
.brand-philosophy strong,
.founder strong{

color:var(--primary);

font-weight:700;

}



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

GLASS CONTENT BOX

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

.story .container,
.brand-philosophy .container,
.founder .container{

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

backdrop-filter:blur(20px);

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

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

border-radius:32px;

padding:70px;

box-shadow:

0 30px 80px rgba(0,0,0,.35),

inset 0 0 0 1px rgba(255,255,255,.02);

transition:.45s ease;

}



.story .container:hover,
.brand-philosophy .container:hover,
.founder .container:hover{

transform:translateY(-8px);

border-color:rgba(212,175,55,.25);

box-shadow:

0 45px 100px rgba(0,0,0,.45),

0 0 50px rgba(212,175,55,.08);

}



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

FOUNDER QUOTE

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

.founder blockquote{

margin-top:45px;

padding:35px;

background:linear-gradient(

135deg,

rgba(212,175,55,.08),

rgba(255,255,255,.03)

);

border-right:5px solid var(--primary);

border-radius:20px;

font-size:1.25rem;

font-style:italic;

line-height:2;

color:#fff;

position:relative;

overflow:hidden;

}



.founder blockquote::before{

content:"“";

position:absolute;

top:-45px;

left:25px;

font-size:140px;

color:rgba(212,175,55,.15);

font-family:serif;

}



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

VALUES

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

.values-grid{

display:grid;

grid-template-columns:

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

gap:30px;

margin-top:60px;

}



.value-card{

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

backdrop-filter:blur(18px);

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

border-radius:28px;

padding:38px;

transition:.45s;

position:relative;

overflow:hidden;

}



.value-card::before{

content:"";

position:absolute;

top:-120px;

left:-120px;

width:240px;

height:240px;

background:

radial-gradient(circle,

rgba(212,175,55,.12),

transparent 70%);

transition:.5s;

}



.value-card:hover::before{

transform:scale(1.6);

}



.value-card:hover{

transform:

translateY(-12px)

rotateX(3deg);

border-color:

rgba(212,175,55,.35);

box-shadow:

0 35px 80px rgba(0,0,0,.4),

0 0 35px rgba(212,175,55,.12);

}



.value-card h3{

font-size:1.4rem;

margin-bottom:22px;

color:var(--primary);

}



.value-card p{

margin:0;

line-height:2;

color:#d7d7d7;

}



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

GOLD LINE

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

.brand-values::after{

content:"";

position:absolute;

bottom:0;

left:50%;

transform:translateX(-50%);

width:220px;

height:2px;

background:

linear-gradient(

90deg,

transparent,

var(--primary),

transparent

);

opacity:.7;

}



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

TEXT ANIMATION

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

.story h2 span,
.brand-philosophy h2 span,
.founder h2 span{

background:

linear-gradient(

90deg,

#fff,

var(--primary),

#fff

);

background-size:250%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

animation:goldText 6s linear infinite;

}



@keyframes goldText{

0%{

background-position:0%;

}

100%{

background-position:250%;

}

}
/*==================================================
WHY US
==================================================*/

.why-us{
position:relative;
}

.why-us .section-description{
max-width:850px;
margin:0 auto 70px;
text-align:center;
color:#d7d7d7;
font-size:1.08rem;
line-height:2;
}

.features-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:30px;

margin-top:70px;

}

.feature-card{

position:relative;

padding:40px;

border-radius:28px;

background:linear-gradient(
180deg,
rgba(255,255,255,.04),
rgba(255,255,255,.02)
);

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

backdrop-filter:blur(18px);

transition:.45s;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:250px;

height:250px;

background:

radial-gradient(circle,
rgba(212,175,55,.14),
transparent 70%);

transition:.5s;

}

.feature-card:hover::before{

transform:scale(1.5);

}

.feature-card:hover{

transform:translateY(-12px);

border-color:rgba(212,175,55,.28);

box-shadow:

0 30px 70px rgba(0,0,0,.35),

0 0 30px rgba(212,175,55,.12);

}

.feature-card h3{

font-size:1.35rem;

margin-bottom:18px;

color:var(--primary);

}

.feature-card p{

margin:0;

line-height:2;

color:#d5d5d5;

}

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

.work-process{

position:relative;

}

.timeline{

margin-top:80px;

position:relative;

padding-right:35px;

}

.timeline::before{

content:"";

position:absolute;

right:12px;

top:0;

bottom:0;

width:2px;

background:linear-gradient(

180deg,

transparent,

var(--primary),

transparent

);

}

.step{

position:relative;

padding:0 0 60px 50px;

}

.step:last-child{

padding-bottom:0;

}

.step span{

position:absolute;

right:-6px;

top:0;

width:36px;

height:36px;

border-radius:50%;

background:var(--primary);

display:flex;

align-items:center;

justify-content:center;

font-size:.85rem;

font-weight:700;

color:#000;

box-shadow:0 0 20px rgba(212,175,55,.45);

}

.step h3{

font-size:1.45rem;

margin-bottom:15px;

color:#fff;

}

.step p{

margin:0;

color:#cfcfcf;

line-height:2;

}

.step:hover span{

transform:scale(1.12);

transition:.35s;

}

.step:hover h3{

color:var(--primary);

transition:.35s;

}
/*==================================================
MANIFESTO
==================================================*/

.manifesto{
padding:120px 0;
}

.manifesto-box,
.letter-box{

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

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

border-radius:30px;

padding:60px;

backdrop-filter:blur(20px);

transition:.4s;

box-shadow:0 25px 60px rgba(0,0,0,.25);

}

.manifesto-box:hover,
.letter-box:hover{

transform:translateY(-8px);

border-color:rgba(212,175,55,.3);

box-shadow:0 35px 80px rgba(0,0,0,.4);

}

.manifesto-box p,
.letter-box p{

font-size:1.1rem;

line-height:2.2;

margin-bottom:28px;

color:#d8d8d8;

}

.manifesto-box strong,
.letter-box strong{

color:var(--primary);

}

/*==================================================
FOUNDER LETTER
==================================================*/

.founder-letter{

padding:140px 0;

}

.letter-box h3{

margin-top:50px;

font-size:1.5rem;

color:var(--primary);

}

.letter-box h2{

margin:15px 0;

font-size:2.4rem;

}

.letter-box{

position:relative;

overflow:hidden;

}

.letter-box::before{

content:"";

position:absolute;

top:-180px;

left:-180px;

width:350px;

height:350px;

background:radial-gradient(circle,
rgba(212,175,55,.15),
transparent 70%);

pointer-events:none;

}

/*==================================================
CTA
==================================================*/

.letter-cta{

margin-top:90px;

padding:70px;

text-align:center;

border-radius:30px;

background:linear-gradient(

135deg,

rgba(212,175,55,.12),

rgba(255,255,255,.03)

);

border:1px solid rgba(212,175,55,.2);

}

.letter-cta h2{

margin-bottom:20px;

font-size:2.5rem;

}

.letter-cta p{

max-width:750px;

margin:auto auto 40px;

line-height:2;

}

.cta-btn{

display:inline-block;

padding:18px 50px;

border-radius:60px;

background:linear-gradient(135deg,var(--primary),#8d6b12);

color:#000;

font-weight:700;

transition:.4s;

box-shadow:0 20px 45px rgba(212,175,55,.3);

}

.cta-btn:hover{

transform:translateY(-6px);

box-shadow:0 30px 60px rgba(212,175,55,.45);

}

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

@media(max-width:992px){

section{

padding:90px 0;

}

.hero h1{

font-size:3rem;

}

section h2{

font-size:2.2rem;

}

.story .container,
.brand-philosophy .container,
.founder .container,
.manifesto-box,
.letter-box{

padding:40px;

}

.timeline{

padding-right:20px;

}

}

@media(max-width:768px){

.hero{

min-height:auto;

padding-top:130px;

}

.hero h1{

font-size:2.3rem;

}

.hero p{

font-size:1rem;

}

.features-grid,
.values-grid{

grid-template-columns:1fr;

}

.letter-cta{

padding:45px 25px;

}

.letter-cta h2{

font-size:1.8rem;

}

.section-name{

letter-spacing:2px;

}

}

@media(max-width:480px){

.hero-btn,
.cta-btn{

width:100%;

text-align:center;

}

.manifesto-box,
.letter-box{

padding:28px;

}

.story .container,
.brand-philosophy .container,
.founder .container{

padding:28px;

}

section h2{

font-size:1.8rem;

}

}
/* ==========================================
   Mr.aiwithmahdi
   About Page Premium Upgrade
   Part 1
========================================== */


/* Premium Animated Background */

.about-page,
body{

background:
radial-gradient(circle at 15% 20%,
rgba(212,175,55,.12),
transparent 35%),

radial-gradient(circle at 85% 80%,
rgba(0,120,255,.10),
transparent 35%),

linear-gradient(
180deg,
#050505,
#090909,
#030303
);

}



/* Floating Light */

.about-page::before{

content:"";

position:fixed;

width:500px;

height:500px;

top:10%;

left:-200px;

background:

radial-gradient(
circle,
rgba(212,175,55,.25),
transparent 70%
);

filter:blur(90px);

animation:
floatLight 12s infinite alternate;

z-index:-1;

}



.about-page::after{

content:"";

position:fixed;

width:450px;

height:450px;

bottom:5%;

right:-150px;

background:

radial-gradient(
circle,
rgba(0,140,255,.18),
transparent 70%
);

filter:blur(100px);

animation:
floatLight 15s infinite alternate-reverse;

z-index:-1;

}



@keyframes floatLight{

0%{

transform:
translate(0,0)
scale(1);

}


100%{

transform:
translate(80px,-60px)
scale(1.25);

}

}



/* Section Reveal */

section{

animation:
sectionShow 1s ease both;

}



@keyframes sectionShow{

from{

opacity:0;

transform:
translateY(40px);

}


to{

opacity:1;

transform:
translateY(0);

}

}



/* Premium Glass Upgrade */

.story .container,
.brand-philosophy .container,
.founder .container,
.manifesto-box,
.letter-box,
.feature-card,
.value-card{


background:

linear-gradient(
135deg,
rgba(255,255,255,.08),
rgba(255,255,255,.025)
);


border:

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


box-shadow:

0 30px 80px
rgba(0,0,0,.45),

inset 0 0 40px
rgba(255,255,255,.02);


backdrop-filter:

blur(25px);


}


/* Golden Glow Hover */

.feature-card:hover,
.value-card:hover,
.story .container:hover,
.brand-philosophy .container:hover,
.founder .container:hover{


box-shadow:

0 35px 100px
rgba(0,0,0,.5),

0 0 50px
rgba(212,175,55,.18);


}
/* ==========================================
   Mr.aiwithmahdi
   About Page Premium Upgrade
   Part 2
   Cards Animation
========================================== */


/* Cards Initial State */

.feature-card,
.value-card,
.step{

opacity:0;

transform:

translateY(50px);

animation:

cardReveal .8s ease forwards;

}


/* Delay Animation */

.feature-card:nth-child(1),
.value-card:nth-child(1){

animation-delay:.1s;

}


.feature-card:nth-child(2),
.value-card:nth-child(2){

animation-delay:.2s;

}


.feature-card:nth-child(3),
.value-card:nth-child(3){

animation-delay:.3s;

}


.feature-card:nth-child(4),
.value-card:nth-child(4){

animation-delay:.4s;

}


.feature-card:nth-child(5),
.value-card:nth-child(5){

animation-delay:.5s;

}


.feature-card:nth-child(6),
.value-card:nth-child(6){

animation-delay:.6s;

}



@keyframes cardReveal{

from{

opacity:0;

transform:

translateY(60px)
scale(.95);

}


to{

opacity:1;

transform:

translateY(0)
scale(1);

}

}



/* Premium Card Hover */

.feature-card,
.value-card{

transition:

transform .45s ease,

border-color .45s ease,

box-shadow .45s ease;

}



.feature-card:hover,
.value-card:hover{


transform:

translateY(-15px)
scale(1.03);


}



/* Moving Shine Effect */


.feature-card::after,
.value-card::after{


content:"";


position:absolute;


top:0;

left:-120%;


width:80%;

height:100%;


background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.15),

transparent

);


transform:skewX(-25deg);


transition:.8s;


}



.feature-card:hover::after,
.value-card:hover::after{


left:140%;


}



/* Timeline Animation */


.step{


transition:.45s ease;

}



.step:hover{


transform:

translateX(-15px);


}



.step span{


transition:.4s ease;


}



.step:hover span{


transform:

scale(1.2)
rotate(360deg);


box-shadow:

0 0 35px
rgba(212,175,55,.7);


}



/* Founder Quote Animation */


.founder blockquote{


animation:

quoteFloat 5s infinite alternate;


}



@keyframes quoteFloat{


from{


transform:

translateY(0);


}



to{


transform:

translateY(-10px);


}



}
/* ==========================================
   Mr.aiwithmahdi
   About Page Premium Upgrade
   Part 3
   Typography + Hero + Buttons
========================================== */


/* Premium Headings */

.hero h1,
section h2{


letter-spacing:-1px;


}



.hero h1 span,
section h2 span{


background:

linear-gradient(

90deg,

#ffffff,

#d4af37,

#fff3b0,

#d4af37

);


background-size:300%;


-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


animation:

goldMove 6s linear infinite;


}



@keyframes goldMove{


0%{

background-position:0%;

}


100%{

background-position:300%;

}


}



/* Founder Name Highlight */


.letter-box h2,
.founder h3{


text-shadow:

0 0 25px

rgba(212,175,55,.35);


}



/* Hero Upgrade */


.hero{


position:relative;


}



.hero::after{


content:"";


position:absolute;


width:700px;

height:700px;


border-radius:50%;


background:

radial-gradient(

circle,

rgba(212,175,55,.12),

transparent 70%

);


top:50%;

left:50%;


transform:

translate(-50%,-50%);


filter:blur(40px);


animation:

heroGlow 8s infinite alternate;


z-index:-1;


}



@keyframes heroGlow{


0%{


opacity:.4;

transform:

translate(-50%,-50%)
scale(1);


}



100%{


opacity:.9;


transform:

translate(-50%,-50%)
scale(1.2);


}


}



/* Premium Buttons */


.hero-btn,
.cta-btn{


position:relative;


overflow:hidden;


border:none;


cursor:pointer;


}



.hero-btn::before,
.cta-btn::before{


content:"";


position:absolute;


top:0;

left:-120%;


width:80%;

height:100%;


background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.45),

transparent

);


transform:

skewX(-25deg);


transition:.8s;


}



.hero-btn:hover::before,
.cta-btn:hover::before{


left:140%;


}



.hero-btn:hover,
.cta-btn:hover{


transform:

translateY(-8px)
scale(1.04);


}



/* Section Titles Glow */


.section-name{


position:relative;


display:inline-block;


}



.section-name::after{


content:"";


position:absolute;


bottom:-8px;


right:0;


width:70%;


height:2px;


background:

linear-gradient(

90deg,

transparent,

var(--primary)

);


}



/* Glass Depth */


.manifesto-box,
.letter-box{


position:relative;


}



.manifesto-box::after,
.letter-box::after{


content:"";


position:absolute;


inset:0;


border-radius:inherit;


background:

linear-gradient(

135deg,

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

transparent 40%

);


pointer-events:none;


}



/* Smooth Text Appearance */


p{

animation:

textFade 1s ease both;


}



@keyframes textFade{


from{


opacity:0;


transform:

translateY(15px);


}


to{


opacity:1;


transform:

translateY(0);


}


}
/* ==========================================
   Mr.aiwithmahdi
   About Page Premium Upgrade
   Part 4
   Final Responsive + Optimization
========================================== */


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

@media (max-width:1100px){


.container{

width:90%;

}



.hero h1{

font-size:3.4rem;

}



section h2{

font-size:2.5rem;

}



.story .container,
.brand-philosophy .container,
.founder .container,
.manifesto-box,
.letter-box{


padding:45px;


}



.features-grid,
.values-grid{


gap:22px;


}



.feature-card,
.value-card{


padding:32px;


}



}


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


@media(max-width:768px){


body{

overflow-x:hidden;

}



section{

padding:80px 0;

}



/* Hero */


.hero{

min-height:auto;

padding-top:120px;

text-align:center;

}



.hero h1{

font-size:2.2rem;

line-height:1.5;

}



.hero p{

font-size:.95rem;

line-height:2;

}



/* Titles */


section h2{

font-size:1.9rem;

line-height:1.5;

}



.section-name{

font-size:.75rem;

letter-spacing:3px;

}



/* Glass Boxes */


.story .container,
.brand-philosophy .container,
.founder .container,
.manifesto-box,
.letter-box{


padding:25px;

border-radius:22px;


}



/* Text */


.story p,
.brand-philosophy p,
.founder p,
.manifesto-box p,
.letter-box p{


font-size:.95rem;

line-height:2.1;


}



/* Cards */


.features-grid,
.values-grid{


grid-template-columns:1fr;


}



.feature-card,
.value-card{


padding:28px;


}



.feature-card:hover,
.value-card:hover{


transform:

translateY(-8px);


}



/* Timeline */


.timeline{


padding-right:20px;


}



.step{


padding-bottom:40px;


}



.step h3{

font-size:1.15rem;

}



.step p{

font-size:.9rem;

}




/* CTA */


.letter-cta{


padding:35px 20px;


}



.letter-cta h2{


font-size:1.5rem;


}



.cta-btn,
.hero-btn{


width:100%;

padding:16px;


}




}


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


@media(max-width:420px){



.hero h1{


font-size:1.8rem;


}



section h2{


font-size:1.6rem;


}



.story .container,
.brand-philosophy .container,
.founder .container,
.manifesto-box,
.letter-box{


padding:20px;


}



.feature-card,
.value-card{


padding:22px;


}



}


/* ==========================================
   REDUCE MOTION SUPPORT
========================================== */


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


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


animation-duration:.01ms!important;


animation-iteration-count:1!important;


transition-duration:.01ms!important;


scroll-behavior:auto!important;


}


}
/* JS Reveal Animation */


.hidden{

opacity:0;

transform:
translateY(40px);

transition:

all .8s ease;

}



.show{

opacity:1;

transform:

translateY(0);

}
/* ==========================================
   Founder Image
   Mr.aiwithmahdi
========================================== */


.founder-image{

    margin:50px auto 20px;

    display:flex;

    justify-content:center;

    position:relative;

}



.founder-image img{


    width:320px;

    height:420px;

    object-fit:cover;


    border-radius:35px;


    border:

    2px solid

    rgba(212,175,55,.5);



    box-shadow:


    0 25px 70px

    rgba(0,0,0,.45),


    0 0 40px

    rgba(212,175,55,.15);



    transition:.5s ease;



}



/* Hover Effect */


.founder-image img:hover{


    transform:

    translateY(-10px)

    scale(1.03);



    box-shadow:


    0 35px 90px

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


    0 0 60px

    rgba(212,175,55,.35);



}



/* Mobile */


@media(max-width:600px){


    .founder-image img{


        width:260px;


        height:340px;


        border-radius:25px;


    }


}