📁 File Manager

Dosya Düzenle: vision-mission.css

/*==================================================
VISION & MISSION PAGE
Mangaldai College (Autonomous)
==================================================*/

:root{

--primary:#0d6efd;
    --secondary:#083b91;
    --accent:#f5b301;

--dark:#17375e;
    --light:#f8fbff;

--text:#555;
    --heading:#14345c;

--white:#ffffff;

--radius:22px;

--shadow:0 20px 50px rgba(0,0,0,.08);

--transition:.4s ease;

}

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

.vm-hero,
.vm-about,
.vision-section,
.mission-section,
.core-values-section,
.motto-section,
.why-choose-section{

position:relative;

overflow:hidden;

}

.section-label{

display:inline-block;

padding:8px 22px;

background:rgba(13,110,253,.08);

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:700;

letter-spacing:.8px;

margin-bottom:18px;

text-transform:uppercase;

}

.section-heading{

font-size:42px;

font-weight:800;

color:var(--heading);

margin-bottom:20px;

line-height:1.2;

}

.section-text{

font-size:17px;

color:var(--text);

line-height:1.9;

}

.section-padding{

padding:100px 0;

}

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

.vm-hero{

min-height:70vh;

display:flex;

align-items:center;

background:
    linear-gradient(rgba(6,37,82,.75),
    rgba(6,37,82,.78)),
    url("../images/about/vision-banner.jpg");

background-size:cover;

background-position:center;

}

.hero-overlay{

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,
    rgba(255,255,255,.12),
    transparent 35%);

}

.hero-content{

position:relative;

z-index:5;

color:#fff;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

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

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

backdrop-filter:blur(15px);

padding:10px 22px;

border-radius:50px;

margin-bottom:25px;

font-weight:600;

}

.hero-content h1{

font-size:64px;

font-weight:800;

margin-bottom:20px;

}

.hero-content p{

max-width:760px;

margin:auto;

font-size:20px;

line-height:1.8;

opacity:.95;

}

.hero-breadcrumb{

margin-top:35px;

}

.hero-breadcrumb a{

color:#fff;

text-decoration:none;

}

.hero-breadcrumb span{

margin:0 12px;

color:#ddd;

}

.hero-wave{

position:absolute;

bottom:-2px;

left:0;

width:100%;

line-height:0;

}

.hero-wave svg{

width:100%;

height:120px;

}

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

.vm-about{

background:#fff;

}

.about-image-wrapper{

position:relative;

}

.about-main-img{

width:100%;

border-radius:28px;

box-shadow:var(--shadow);

}

.experience-card{

position:absolute;

bottom:30px;

right:-20px;

width:220px;

background:#fff;

border-radius:20px;

padding:25px;

box-shadow:0 20px 45px rgba(0,0,0,.12);

text-align:center;

}

.experience-card h2{

color:var(--primary);

font-size:42px;

font-weight:800;

margin-bottom:5px;

}

.experience-card span{

color:#666;

font-weight:600;

}

.lead-text{

font-size:18px;

line-height:1.9;

color:#555;

margin:25px 0;

}

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

.glass-highlight{

display:flex;

gap:20px;

align-items:flex-start;

padding:30px;

margin-top:30px;

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

backdrop-filter:blur(20px);

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

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.glass-highlight i{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#fff;

background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

flex-shrink:0;

}

.glass-highlight p{

margin:0;

font-size:17px;

line-height:1.8;

}

/*==================================================
FEATURE BOXES
==================================================*/

.feature-box{

display:flex;

gap:18px;

align-items:center;

padding:22px;

background:#fff;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.06);

transition:var(--transition);

height:100%;

}

.feature-box:hover{

transform:translateY(-8px);

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

}

.feature-box i{

width:55px;

height:55px;

border-radius:50%;

background:linear-gradient(135deg,
    var(--primary),
    var(--secondary));

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

flex-shrink:0;

}

.feature-box h6{

margin-bottom:4px;

font-weight:700;

color:var(--heading);

}

.feature-box span{

color:#777;

font-size:14px;

}

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

.vision-section{

background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);

padding:100px 0;

}

/* Decorative Shapes */

.shape{

position:absolute;

border-radius:50%;

z-index:0;

}

.shape-1{

width:320px;

height:320px;

background:rgba(13,110,253,.05);

top:-120px;

right:-120px;

}

.shape-2{

width:220px;

height:220px;

background:rgba(245,179,1,.08);

bottom:-70px;

left:-70px;

}

/* Content */

.vision-section .container{

position:relative;

z-index:2;

}

/*==================================================
VISION GLASS CARD
==================================================*/

.vision-glass-card{

position:relative;

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

backdrop-filter:blur(20px);

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

border-radius:28px;

padding:55px;

overflow:hidden;

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

transition:.4s ease;

}

.vision-glass-card:hover{

transform:translateY(-8px);

box-shadow:0 35px 70px rgba(0,0,0,.12);

}

/* Decorative Circle */

.vision-glass-card::before{

content:"";

position:absolute;

width:220px;

height:220px;

background:rgba(13,110,253,.04);

border-radius:50%;

top:-80px;

right:-70px;

}

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

.quote-circle{

width:90px;

height:90px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:32px;

margin-bottom:30px;

background:

linear-gradient(135deg,
    var(--primary),
    var(--secondary));

box-shadow:

0 15px 35px rgba(13,110,253,.25);

}

.vision-glass-card h3{

color:var(--heading);

font-size:34px;

font-weight:800;

}

.vision-description{

font-size:20px;

line-height:2;

color:#555;

margin-top:25px;

}

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

.vision-footer{

display:flex;

align-items:center;

gap:15px;

margin-top:35px;

font-weight:600;

color:var(--primary);

}

.vision-footer i{

font-size:22px;

}

/*==================================================
RIGHT MINI CARDS
==================================================*/

.vision-mini-card{

display:flex;

align-items:flex-start;

gap:20px;

background:#fff;

padding:25px;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.06);

transition:.35s ease;

height:100%;

position:relative;

overflow:hidden;

}

.vision-mini-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:linear-gradient(

to bottom,

var(--primary),

var(--accent)

);

transform:scaleY(0);

transform-origin:top;

transition:.35s;

}

.vision-mini-card:hover{

transform:translateX(10px);

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

}

.vision-mini-card:hover::before{

transform:scaleY(1);

}

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

.icon-box{

width:65px;

height:65px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

font-size:24px;

flex-shrink:0;

transition:.35s;

}

.vision-mini-card:hover .icon-box{

transform:rotate(-10deg) scale(1.08);

}

.vision-mini-card h5{

margin-bottom:8px;

font-weight:700;

color:var(--heading);

}

.vision-mini-card p{

margin:0;

color:#666;

line-height:1.7;

}

/*==================================================
VISION ANIMATION
==================================================*/

.vision-glass-card,

.vision-mini-card{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

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

@media(max-width:991px){

.vision-glass-card{

padding:40px;

}

.vision-description{

font-size:18px;

}

@media(max-width:767px){

.vision-section{

padding:70px 0;

}

.vision-glass-card{

padding:30px;

}

.quote-circle{

width:70px;

height:70px;

font-size:24px;

}

.vision-glass-card h3{

font-size:28px;

}

.vision-description{

font-size:17px;

line-height:1.9;

}

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

.mission-section{

position:relative;

background:#ffffff;

padding:110px 0;

overflow:hidden;

}

.mission-section::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:
    radial-gradient(circle at left top,
    rgba(13,110,253,.05),
    transparent 35%),

radial-gradient(circle at right bottom,
    rgba(245,179,1,.06),
    transparent 35%);

pointer-events:none;

}

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

.mission-timeline{

position:relative;

max-width:1100px;

margin:auto;

padding:30px 0;

}

/* Center Line */

.mission-timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

width:4px;

height:100%;

transform:translateX(-50%);

background:linear-gradient(

to bottom,

var(--primary),

var(--accent),

var(--secondary)

);

border-radius:50px;

}

/*=========================================
MISSION ITEM
=========================================*/

.mission-item{

position:relative;

width:50%;

padding:25px 50px;

}

.mission-item.left{

left:0;

}

.mission-item.right{

left:50%;

}

/* Timeline Dot */

.mission-item::before{

content:"";

position:absolute;

top:55px;

width:22px;

height:22px;

border-radius:50%;

background:#fff;

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

z-index:10;

box-shadow:0 0 0 8px rgba(13,110,253,.08);

}

.mission-item.left::before{

right:-11px;

}

.mission-item.right::before{

left:-11px;

}

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

.mission-card{

position:relative;

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

backdrop-filter:blur(20px);

border-radius:24px;

padding:35px;

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

box-shadow:0 18px 45px rgba(0,0,0,.08);

transition:.4s;

overflow:hidden;

}

.mission-card:hover{

transform:translateY(-8px);

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

}

/* Decorative Corner */

.mission-card::after{

content:"";

position:absolute;

width:120px;

height:120px;

border-radius:50%;

background:rgba(13,110,253,.04);

right:-40px;

top:-40px;

}

/*=========================================
MISSION NUMBER
=========================================*/

.mission-number{

position:absolute;

top:20px;

right:25px;

font-size:46px;

font-weight:800;

color:rgba(13,110,253,.08);

user-select:none;

}

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

.mission-icon{

width:70px;

height:70px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

font-size:28px;

margin-bottom:25px;

transition:.35s;

}

.mission-card:hover .mission-icon{

transform:rotate(-8deg) scale(1.08);

}

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

.mission-card h4{

font-size:24px;

color:var(--heading);

font-weight:700;

margin-bottom:15px;

}

.mission-card p{

margin:0;

color:#666;

line-height:1.9;

}

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

.mission-item{

animation:fadeMission .8s ease both;

}

@keyframes fadeMission{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

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

@media(max-width:991px){

.mission-timeline::before{

left:25px;

}

.mission-item{

width:100%;

left:0 !important;

padding-left:70px;

padding-right:0;

margin-bottom:35px;

}

.mission-item::before{

left:15px !important;

right:auto;

}

@media(max-width:768px){

.mission-section{

padding:70px 0;

}

.mission-card{

padding:28px;

}

.mission-number{

font-size:34px;

}

.mission-card h4{

font-size:20px;

}

/*==================================================
CORE VALUES
==================================================*/

.core-values-section{

position:relative;

padding:100px 0;

background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);

overflow:hidden;

}

/* Decorative Background */

.core-values-section::before{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

background:rgba(13,110,253,.05);

top:-120px;

left:-120px;

}

.core-values-section::after{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:rgba(245,179,1,.08);

bottom:-100px;

right:-100px;

}

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

.value-card{

position:relative;

background:#fff;

border-radius:24px;

padding:40px 30px;

text-align:center;

overflow:hidden;

height:100%;

border:1px solid rgba(0,0,0,.04);

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.4s ease;

}

.value-card:hover{

transform:translateY(-12px);

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

}

/* Top Border Animation */

.value-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(

90deg,

var(--primary),

var(--accent),

var(--secondary)

);

transform:scaleX(0);

transform-origin:left;

transition:.4s;

}

.value-card:hover::before{

transform:scaleX(1);

}

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

.value-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(

135deg,

var(--primary),

var(--secondary)

);

color:#fff;

font-size:34px;

box-shadow:0 15px 35px rgba(13,110,253,.20);

transition:.4s;

}

.value-card:hover .value-icon{

transform:rotateY(180deg) scale(1.08);

}

/*==================================================
TITLE
==================================================*/

.value-card h4{

font-size:24px;

font-weight:700;

color:var(--heading);

margin-bottom:15px;

}

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

.value-card p{

color:#666;

line-height:1.9;

margin:0;

font-size:16px;

}

/*==================================================
DECORATIVE CIRCLE
==================================================*/

.value-card .circle{

position:absolute;

width:140px;

height:140px;

border-radius:50%;

background:rgba(13,110,253,.03);

right:-60px;

bottom:-60px;

transition:.5s;

}

.value-card:hover .circle{

transform:scale(1.35);

}

/*==================================================
NUMBER BADGE
==================================================*/

.value-number{

position:absolute;

top:20px;

right:22px;

font-size:46px;

font-weight:800;

color:rgba(13,110,253,.07);

user-select:none;

}

/*==================================================
HOVER GLOW
==================================================*/

.value-card:hover{

background:linear-gradient(

180deg,

#ffffff,

#fdfefe

);

}

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

.value-card{

animation:valueFade .8s ease both;

}

@keyframes valueFade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

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

@media(max-width:991px){

.core-values-section{

padding:80px 0;

}

.value-card{

padding:35px 25px;

}

@media(max-width:767px){

.core-values-section{

padding:70px 0;

}

.value-card{

padding:30px 22px;

}

.value-icon{

width:75px;

height:75px;

font-size:28px;

}

.value-card h4{

font-size:21px;

}

.value-number{

font-size:34px;

}

/*==================================================
COLLEGE MOTTO
==================================================*/

.motto-section{

position:relative;

padding:110px 0;

background:linear-gradient(135deg,#0d6efd,#083b91);

overflow:hidden;

}

.motto-section::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

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

top:-180px;

left:-150px;

}

.motto-section::after{

content:"";

position:absolute;

width:320px;

height:320px;

border-radius:50%;

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

bottom:-140px;

right:-120px;

}

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

.motto-card{

position:relative;

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

backdrop-filter:blur(18px);

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

border-radius:30px;

padding:60px;

text-align:center;

color:#fff;

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

}

.motto-icon{

width:100px;

height:100px;

margin:auto;

margin-bottom:30px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

font-size:42px;

}

.motto-title{

font-size:44px;

font-weight:800;

margin-bottom:15px;

}

.motto-subtitle{

font-size:22px;

color:#ffd86a;

margin-bottom:25px;

font-weight:600;

}

.motto-card p{

font-size:18px;

line-height:2;

opacity:.95;

}

/*==================================================
MOTTO FEATURES
==================================================*/

.motto-feature{

margin-top:35px;

background:#fff;

border-radius:22px;

text-align:center;

padding:35px 25px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

height:100%;

}

.motto-feature:hover{

transform:translateY(-10px);

}

.motto-feature i{

width:75px;

height:75px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:28px;

}

.motto-feature h5{

color:var(--heading);

font-weight:700;

margin-bottom:10px;

}

.motto-feature p{

color:#666;

margin:0;

line-height:1.8;

}

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

.why-choose-section{

padding:100px 0;

background:#f8fbff;

}

.achievement-card{

background:#fff;

border-radius:25px;

padding:40px 25px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.35s;

height:100%;

}

.achievement-card:hover{

transform:translateY(-10px);

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

}

.achievement-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:20px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-size:30px;

}

.achievement-card h2{

color:var(--heading);

font-size:42px;

font-weight:800;

margin-bottom:10px;

}

.achievement-card span{

color:#666;

font-size:17px;

font-weight:600;

}

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

.premium-cta{

margin-top:70px;

background:linear-gradient(135deg,#083b91,#0d6efd);

color:#fff;

border-radius:35px;

padding:60px;

overflow:hidden;

position:relative;

box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.premium-cta::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

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

top:-180px;

right:-120px;

}

.cta-label{

display:inline-block;

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

padding:8px 20px;

border-radius:50px;

margin-bottom:18px;

font-weight:600;

}

.premium-cta h2{

font-size:42px;

font-weight:800;

margin-bottom:20px;

}

.premium-cta p{

font-size:18px;

line-height:1.9;

opacity:.95;

}

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

.premium-cta .btn{

padding:14px 35px;

font-weight:700;

border-radius:50px;

transition:.35s;

}

.premium-cta .btn-warning{

background:var(--accent);

border:none;

color:#000;

}

.premium-cta .btn-warning:hover{

transform:translateY(-4px);

}

.premium-cta .btn-outline-light:hover{

color:var(--primary);

background:#fff;

}

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

@media(max-width:991px){

.motto-card{

padding:40px;

}

.premium-cta{

padding:45px;

}

.premium-cta h2{

font-size:34px;

}

@media(max-width:768px){

.motto-section,

.why-choose-section{

padding:70px 0;

}

.motto-card{

padding:30px;

}

.motto-title{

font-size:32px;

}

.motto-subtitle{

font-size:18px;

}

.premium-cta{

text-align:center;

padding:35px 25px;

}

.premium-cta h2{

font-size:28px;

}

.premium-cta .btn{

width:100%;

margin-bottom:15px;

}

.achievement-card{

padding:30px 20px;

}

.achievement-card h2{

font-size:34px;

}

İptal