/* =====================================================
   DIASPORA SOLUTIONS SUMMIT 2027
   Main Stylesheet
   Approved Brand Identity: Green + Gold
===================================================== */


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

:root {

    --primary: #0B5E3B;
    --primary-dark: #073D27;

    --gold: #C8A03A;
    --gold-light: #E7C66A;

    --dark: #1F2937;
    --black: #111827;

    --white: #ffffff;
    --light: #F8F9FA;

    --grey: #6B7280;

    --border:#E5E7EB;


    --heading-font:"Poppins", sans-serif;
    --body-font:"Inter", sans-serif;


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


    --transition:
    all .3s ease;

}





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


*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}



body{

font-family:var(--body-font);
color:var(--dark);
line-height:1.7;
background:white;

}



img{

max-width:100%;
display:block;

}



a{

text-decoration:none;
color:inherit;

}



ul{

list-style:none;

}





/* ================= GLOBAL ================= */


.container{

width:90%;
max-width:1200px;
margin:auto;

}



.section{

padding:90px 0;

}



.light-section{

background:var(--light);

}



.section-heading{

text-align:center;
max-width:750px;
margin:0 auto 50px;

}



.section-tag{

color:var(--gold);
font-weight:700;
letter-spacing:2px;
font-size:.85rem;
margin-bottom:15px;

}



.section-heading h2{

font-family:var(--heading-font);
font-size:2.5rem;
color:var(--black);

}





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


.site-header{

position:fixed;
top:0;
width:100%;
z-index:1000;


background:

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


backdrop-filter:blur(10px);


box-shadow:

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


}



.nav-container{

height:85px;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

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

font-size:1.7rem;

font-weight:800;

color:var(--primary);

}



.logo span{

color:var(--gold);

}



.main-nav ul{

display:flex;

align-items:center;

gap:30px;

}



.main-nav a{

font-weight:600;

color:var(--dark);

transition:var(--transition);

}



.main-nav a:hover,
.main-nav .active{

color:var(--primary);

}



.nav-button{

background:var(--primary);

color:white!important;

padding:12px 25px;

border-radius:30px;

}



.nav-button:hover{

background:var(--gold);

}





.menu-toggle{

display:none;

border:none;

background:none;

cursor:pointer;

}



.menu-toggle span{

display:block;

width:28px;

height:3px;

background:var(--dark);

margin:5px;

}





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


.hero{


min-height:100vh;

padding-top:120px;


background:


radial-gradient(

circle at 80% 20%,

rgba(200,160,58,.35),

transparent 35%

),



linear-gradient(

120deg,

rgba(11,94,59,.97),

rgba(7,61,27,.98)

);



color:white;


}



.hero-container{


display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:50px;

min-height:80vh;


}



.hero-tag{

color:var(--gold-light);

font-weight:700;

letter-spacing:3px;

margin-bottom:20px;

}



.hero h1{


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

font-size:3.6rem;

line-height:1.15;

margin-bottom:25px;


}



.hero p{

font-size:1.1rem;

max-width:600px;

}



.hero-buttons{

display:flex;

gap:20px;

margin-top:35px;

}



.btn{


padding:15px 35px;

border-radius:40px;

font-weight:700;

display:inline-block;

transition:var(--transition);


}



.btn-primary{

background:var(--gold);

color:white;


}



.btn-primary:hover{

background:white;

color:var(--primary);

}



.btn-secondary{


border:2px solid white;

color:white;


}



.btn-secondary:hover{

background:white;

color:var(--primary);

}



.hero-details{


display:flex;

gap:40px;

margin-top:50px;


}



.hero-details strong{

color:var(--gold-light);

}





/* ================= DIASPORA NETWORK VISUAL ================= */


.hero-visual{

display:flex;

justify-content:center;

}



.globe-placeholder{


width:380px;

height:380px;

border-radius:50%;


border:

2px solid rgba(255,255,255,.3);



display:flex;

align-items:center;

justify-content:center;

position:relative;


}



.circle{


width:280px;

height:280px;

border-radius:50%;


background:

radial-gradient(

circle,

rgba(200,160,58,.5),

transparent

);


}



.connection-dot{


width:15px;

height:15px;

background:var(--gold);

border-radius:50%;

position:absolute;


}



.dot-one{

top:80px;
left:80px;

}



.dot-two{

right:90px;
top:120px;

}



.dot-three{

bottom:90px;
right:140px;

}



.nigeria-label{

position:absolute;

bottom:80px;

color:white;

font-weight:700;

}


.location-label{

position:absolute;

color:white;

font-size:.85rem;

font-weight:700;

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

padding:5px 10px;

border-radius:20px;

}


.uk{

top:70px;

left:70px;

}


.usa{

top:150px;

left:20px;

}


.uae{

top:100px;

right:40px;

}


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


.page-hero{


padding:160px 0 100px;


background:


linear-gradient(

120deg,

var(--primary-dark),

var(--primary)

);



color:white;

text-align:center;


}



.page-hero h1{

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

font-size:3.3rem;

margin-bottom:20px;

}





/* ================= SUMMIT LAUNCH ================= */


.summit-launch{

padding:80px 0;

}



.launch-card{


background:white;

padding:60px;

border-radius:25px;

box-shadow:var(--shadow);

text-align:center;


}



.launch-tag{


color:var(--gold);

font-weight:800;

letter-spacing:3px;


}



.launch-card h2{


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

font-size:2.8rem;

color:var(--primary);

margin:20px 0;


}



.launch-details{


display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-top:40px;


}



.launch-details div{


background:var(--light);

padding:25px;

border-radius:15px;


}



.launch-details span{


display:block;

color:var(--grey);

font-size:.8rem;


}





/* ================= CONTENT ================= */


.two-column{


display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;


}



.info-box{


background:white;

padding:40px;

box-shadow:var(--shadow);

border-left:5px solid var(--gold);


}





/* ================= CARDS ================= */


.card-grid{


display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;


}



.card{


background:white;

padding:35px 25px;

border-radius:15px;

box-shadow:var(--shadow);

transition:var(--transition);


}



.card:hover{

transform:translateY(-8px);

}



.card h3{


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

color:var(--primary);

margin-bottom:15px;


}





/* ================= REGISTRATION FORM ================= */


.register-layout{


display:grid;

grid-template-columns:1fr 1.2fr;

gap:60px;


}



.form-card{


background:white;

padding:45px;

border-radius:20px;

box-shadow:var(--shadow);


}



.form-group{

margin-bottom:20px;

}



.form-group label{

display:block;

font-weight:600;

margin-bottom:8px;

}



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


width:100%;

padding:15px;

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

border-radius:10px;

font-family:inherit;


}



.register-list li{


padding:12px 0;

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


}





/* ================= FOCUS ================= */


.focus-grid{


display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;


}



.focus-grid div{


background:var(--primary);

color:white;

padding:30px;

border-radius:12px;

text-align:center;

font-weight:600;


}





/* ================= GOVERNMENT ================= */


.government-section{


background:

linear-gradient(

120deg,

var(--primary-dark),

var(--primary)

);



color:white;

text-align:center;

padding:90px 0;


}



.government-section h2{


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

font-size:2.5rem;


}





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


.cta-section{


background:var(--gold);

padding:80px 0;

text-align:center;


}



.cta-section h2{


color:white;

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


}





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


.footer{


background:var(--black);

color:white;

padding:35px 0;

text-align:center;


}





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


@media(max-width:1000px){


.hero-container,
.two-column,
.register-layout{


grid-template-columns:1fr;


}



.hero{

text-align:center;

}



.hero-buttons,
.hero-details{

justify-content:center;

}



.card-grid{

grid-template-columns:repeat(2,1fr);

}



.focus-grid{

grid-template-columns:repeat(2,1fr);

}



.launch-details{

grid-template-columns:1fr;

}



}





@media(max-width:768px){


.menu-toggle{

display:block;

}



.main-nav{

display:none;

position:absolute;

top:85px;

left:0;

width:100%;

background:white;

padding:30px;


}



.main-nav ul{

flex-direction:column;

}



.main-nav.show{

display:block;

}



.hero h1{

font-size:2.5rem;

}



.globe-placeholder{


width:280px;

height:280px;


}



.card-grid,
.focus-grid{


grid-template-columns:1fr;


}



.page-hero h1{

font-size:2.2rem;

}


}
/* =====================================================
   THE SUMMIT PAGE SPECIFIC STYLES
   APC UK Diaspora Engagement Summit 2027
===================================================== */


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


.page-hero {

    min-height: 65vh;
    padding-top: 160px;
    display:flex;
    align-items:center;
    text-align:center;

    background:

    linear-gradient(
        135deg,
        rgba(7,61,39,0.95),
        rgba(11,94,59,0.9)
    ),

    url("../images/summit-background.jpg");

    background-size:cover;
    background-position:center;

    color:white;

}



.page-hero h1 {

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

    font-size:clamp(2.5rem,5vw,4rem);

    line-height:1.15;

    margin-bottom:25px;

}



.page-hero p {

    color:white;

}





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


.section p {

    font-size:1.05rem;

}



.section h3 {

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

    color:var(--primary);

}





/* ================= SUMMIT HIGHLIGHT BOX ================= */


.info-box ul li {

    margin-bottom:15px;

    font-weight:500;

}





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


.card {

    position:relative;

    overflow:hidden;

}



.card::before {


    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    transform:scaleX(0);

    transition:.3s ease;

}



.card:hover::before {

    transform:scaleX(1);

}



.card:hover {

    transform:translateY(-10px);

}





/* ================= FOCUS AREA CARDS ================= */


.focus-grid div {


    background:white;

    color:var(--dark);

    padding:35px 25px;

    border-radius:15px;

    box-shadow:

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

    text-align:center;

    transition:.3s ease;

}



.focus-grid div:hover {


    background:var(--primary);

    color:white;

    transform:translateY(-8px);

}



.focus-grid div h3 {


    margin-top:15px;

    font-size:1.1rem;

    color:inherit;

}





/* ================= LIST STYLING ================= */


.section ul {


    margin-top:20px;

}



.section ul li {


    margin-bottom:18px;

    font-size:1.05rem;

}





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


.government-section {


    background:

    linear-gradient(

    rgba(7,61,39,.9),

    rgba(7,61,39,.95)

    ),

    url("../images/nigeria-world.jpg");


    background-size:cover;

    background-position:center;

}



.government-section h2 {


    color:white;

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

}





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


.card .btn {


    margin-top:20px;

}





/* ================= SUMMIT IMAGE ================= */


.two-column img {


    width:100%;

    height:100%;

    object-fit:cover;

    min-height:350px;

}





/* ================= BACK TO TOP ================= */


.back-to-top {


    position:fixed;

    right:30px;

    bottom:30px;

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    background:var(--gold);

    color:white;

    font-size:1.4rem;

    cursor:pointer;

    display:none;

    z-index:999;

}



.back-to-top.show {


    display:block;

}





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


@media(max-width:1000px){



.page-hero {


    min-height:55vh;

}



.two-column {


    grid-template-columns:1fr;

}



.card-grid {


    grid-template-columns:repeat(2,1fr);

}



.focus-grid {


    grid-template-columns:repeat(2,1fr);

}



}





@media(max-width:768px){



.page-hero {


    padding-top:130px;

    min-height:60vh;

}



.page-hero h1 {


    font-size:2.4rem;

}



.section {


    padding:60px 0;

}



.card-grid {


    grid-template-columns:1fr;

}



.focus-grid {


    grid-template-columns:1fr;

}



.info-box {


    padding:25px;

}



.two-column {


    gap:30px;

}



.hero-buttons {


    flex-direction:column;

}



.back-to-top {


    right:20px;

    bottom:20px;

}



}





/* ================= LARGE SCREENS ================= */


@media(min-width:1400px){


.container {


    max-width:1300px;

}


}
/* ================= PROGRAMME PAGE ================= */


.programme-tabs{

display:flex;
justify-content:center;
gap:20px;
margin-bottom:50px;
flex-wrap:wrap;

}


.programme-tabs button{

background:white;
border:2px solid var(--primary);
padding:12px 30px;
border-radius:30px;
font-weight:700;
cursor:pointer;

}


.programme-tabs button.active{

background:var(--primary);
color:white;

}




.timeline{

position:relative;
max-width:900px;
margin:auto;

}



.timeline::before{

content:"";

position:absolute;

left:95px;

top:0;

bottom:0;

width:3px;

background:var(--gold);

}



.timeline-item{

display:grid;

grid-template-columns:100px 1fr;

gap:40px;

margin-bottom:35px;

}



.timeline-time{

font-weight:800;

color:var(--primary);

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

padding-top:20px;

}



.timeline-card{

background:white;

padding:30px;

border-radius:15px;

box-shadow:var(--shadow);

border-left:5px solid var(--gold);

}



.session-tag{

background:var(--primary);

color:white;

padding:5px 15px;

border-radius:20px;

font-size:.8rem;

font-weight:700;

}



.timeline-card h3{

margin:15px 0;

color:var(--primary);

}



@media(max-width:768px){


.timeline::before{

left:20px;

}


.timeline-item{

grid-template-columns:1fr;

padding-left:50px;

}


.timeline-time{

padding-top:0;

}


}