/****************************************************
N21 TECHNOLOGIES
ZOHO SERVICES STYLESHEET
*****************************************************/


/*********************************
CONTAINER
*********************************/

.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}


/*********************************
HERO
*********************************/


.zoho-hero{

height:100vh;

background:

linear-gradient(

135deg,

#0b3d91,

#1e90ff

);


display:flex;

align-items:center;

overflow:hidden;

position:relative;

}




.hero-overlay{


position:absolute;

top:0;

left:0;


width:100%;
height:100%;


background:


rgba(0,0,0,.4);


}




.zoho-hero-grid{


display:grid;


grid-template-columns:


1fr 1fr;


gap:60px;


align-items:center;


}




.hero-left{


position:relative;

z-index:2;

color:white;


}



.hero-left h1{


font-size:62px;

font-weight:800;


line-height:1.1;


margin-bottom:25px;


}



.hero-left span{


color:#ffb400;


}



.hero-left p{


font-size:20px;


line-height:1.8;


margin-bottom:40px;


color:#ddd;


}




.hero-right{


display:grid;


grid-template-columns:


repeat(3,1fr);


gap:25px;


position:relative;


z-index:2;


}




.hero-right img{


width:120px;


padding:20px;


background:white;


border-radius:15px;



box-shadow:


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


animation:


float 4s infinite ease-in-out;


}




.hero-right img:nth-child(2){

animation-delay:.5s;

}

.hero-right img:nth-child(3){

animation-delay:1s;

}

.hero-right img:nth-child(4){

animation-delay:1.5s;

}

.hero-right img:nth-child(5){

animation-delay:2s;

}



@keyframes float{


0%{

transform:translateY(0px);

}


50%{

transform:translateY(-15px);

}


100%{

transform:translateY(0px);

}


}




.partner-badge{


display:inline-block;


padding:10px 20px;

border-radius:50px;


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


backdrop-filter:blur(15px);


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



font-size:14px;

margin-bottom:25px;


color:#fff;

}



.hero-content h1{

font-size:62px;

font-weight:800;


line-height:1.1;

margin-bottom:25px;


}



.hero-content span{

color:#ffb400;

}



.hero-content p{


font-size:20px;


line-height:1.7;

margin-bottom:40px;


color:#d6d6d6;

}




/*********************************
BUTTONS
*********************************/

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

}




.primary-btn{


padding:15px 35px;

border-radius:8px;


background:#ffb400;

color:white;


text-decoration:none;


font-weight:600;



transition:.4s;


}




.primary-btn:hover{


transform:translateY(-4px);


box-shadow:

0 15px 40px rgba(255,180,0,.4);


}





.secondary-btn{


padding:15px 35px;


border-radius:8px;


border:1px solid white;


color:white;


text-decoration:none;


font-weight:600;



transition:.4s;


}




.secondary-btn:hover{


background:white;

color:#003566;

}




/*********************************
HERO STATS
*********************************/

.hero-stats{

display:flex;

gap:50px;

flex-wrap:wrap;

}


.hero-stats div{


text-align:center;

}



.hero-stats h3{


font-size:36px;

color:#ffb400;


}


.hero-stats p{

color:white;


}




/*********************************
PARTNER STRIP
*********************************/

.zoho-strip{


padding:20px;

text-align:center;


font-weight:600;


background:#ffb400;


color:white;


letter-spacing:1px;


}





/*********************************
ZOHO BANNER
*********************************/

.zoho-banner{


padding:80px 0;

text-align:center;


}


.zoho-banner img{


max-width:100%;

border-radius:15px;



box-shadow:


0 20px 60px rgba(0,0,0,.1);



}




/*********************************
PRODUCTS
*********************************/

#products{


padding:100px 0;


background:#f5f8ff;


}




.section-header{


text-align:center;


margin-bottom:70px;


}



.section-header h2{


font-size:42px;


margin-bottom:20px;


}



.section-header p{


font-size:18px;


color:#666;


}




.zoho-grid{


display:grid;


grid-template-columns:


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


gap:35px;


}




.zoho-card{


background:white;


padding:40px;


border-radius:20px;


text-align:center;


text-decoration:none;


transition:.4s;


position:relative;


overflow:hidden;



box-shadow:


0 10px 40px rgba(0,0,0,.05);



}





.zoho-card:hover{


transform:translateY(-10px);



box-shadow:


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



}




.zoho-card img{


height:70px;


margin-bottom:20px;


}




.zoho-card h3{


font-size:24px;


margin-bottom:15px;


color:#003566;


}



.zoho-card p{


font-size:15px;


line-height:1.8;


color:#555;


margin-bottom:25px;


}




.zoho-card span{


color:#ffb400;


font-weight:700;


}




/*********************************
SERVICES
*********************************/


.zoho-services{


padding:100px 0;


}




.services-grid{


display:grid;


grid-template-columns:


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


gap:30px;


}




.services-grid div{


background:white;


padding:35px;


border-radius:15px;


text-align:center;


transition:.4s;



box-shadow:


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



}




.services-grid div:hover{


transform:translateY(-8px);



box-shadow:


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



}




.services-grid i{


font-size:42px;


color:#ffb400;


margin-bottom:15px;


display:block;


}




/*********************************
JOURNEY
*********************************/


.zoho-journey{


padding:100px 0;


background:#f7f9fc;


text-align:center;


}



.journey-steps{


display:flex;


justify-content:center;


gap:40px;


flex-wrap:wrap;


}



.step{


background:white;


padding:30px;


border-radius:15px;


width:200px;



box-shadow:


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



}




.step h3{


color:#003566;


margin-bottom:10px;


}



.step i{


font-size:32px;


color:#ffb400;


margin-bottom:15px;


}



/*********************************
CTA
*********************************/

.zoho-cta{


padding:120px 20px;


text-align:center;



background:


linear-gradient(

135deg,

#003566,

#00509d);


color:white;


}




.zoho-cta h2{


font-size:42px;


margin-bottom:20px;


}



.zoho-cta p{


font-size:18px;


margin-bottom:40px;


color:#ddd;


}



.zoho-cta a{


padding:18px 40px;


background:#ffb400;


color:white;


text-decoration:none;


border-radius:8px;


font-weight:700;


transition:.4s;


}



.zoho-cta a:hover{


transform:translateY(-4px);


box-shadow:


0 15px 35px rgba(255,180,0,.4);


}




/*********************************
SCROLL ANIMATION
*********************************/

.fade-up{


opacity:0;


transform:translateY(40px);


transition:.8s;


}



.fade-up.show{


opacity:1;


transform:translateY(0);


}



/*********************************
MOBILE
*********************************/

@media(max-width:768px){


.hero-content h1{

font-size:38px;

}


.hero-content p{

font-size:16px;

}


.hero-buttons{

flex-direction:column;

}


.hero-stats{

gap:25px;

justify-content:center;

}


.section-header h2{

font-size:32px;

}


.zoho-cta h2{

font-size:30px;

}


.services-grid{

grid-template-columns:1fr;

}


.journey-steps{

flex-direction:column;

align-items:center;

}


}