@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* --- Basic Reset & Setup --- */
* {margin: 0;padding: 0;box-sizing: border-box;}
html {scroll-behavior: smooth;}
body {font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; background-color: #f4f4f4;}
a {text-decoration: none;color: inherit;}
ul {list-style: none;}
img{max-width: 100%}

/* --- Main Navbar Container --- */
.navbar {
    background-color: #101f30;
    padding: 1rem 2rem;
    color: #ffffff;
    min-height: 70px;
}
.navbar-padd{max-width: 1366px;	margin: auto; display: flex; justify-content: space-between; align-items: center;}
/* --- Logo Styling --- */
.nav-logo {
    display: flex;
    align-items: center;
/*    gap: 15px;*/
}

.logo-main {
    display: flex;
    align-items: center;
    gap: 5px;
}

.logo-text {
	font-family: "Merriweather", serif;
    font-size: 1.8rem;
    font-weight: bold;
}

.logo-icon {
    display: inline-block;
	margin: 0 20px;
}

.logo-tagline {
    font-size: 1.125rem;
    color: #fff;
}

/* --- Navigation Menu (Desktop) --- */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    font-size: 1.25rem;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #ffd700;
}

/* --- Dropdown Menu (Desktop) --- */
.dropdown {
    position: relative;
}

.dropdown .nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
}

.arrow-down {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: all 0.3s ease;
}

.dropdown-menu {
    position: absolute;
	z-index: 99;
    top: 150%;
    left: -15px;
    background-color: #101f30;
    border-radius: 4px;
    padding: 0.5rem 0;
    width: 150px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: #ffffff;
    transition: background-color 0.3s ease;
}

.dropdown-menu a:hover {
    background-color: #2c3e50;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown:hover .arrow-down {
    border-color: #ffd700;
}


/* --- Login Button Styling --- */
.login-button {
    background-color: #b52a42;
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #9e2439;
}

/* --- Hamburger Menu Icon --- */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: all 0.3s ease-in-out;
}

/* --- RESPONSIVE STYLES (Mobile View) --- */
@media (max-width: 992px) {
    .logo-tagline {
        display: none;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: #101f30;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        gap: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
		z-index: 99;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        padding: 1.2rem 0;
        display: block;
        border-bottom: 1px solid #2c3e50;
    }

    .login-button {
        display: inline-block;
        margin: 1.5rem 0;
        width: 90%;
    }
    
    .nav-item:last-child .nav-link {
        border-bottom: none;
    }

    /* Mobile Dropdown Logic */
    .dropdown .nav-link {
        justify-content: center;
    }
    
    .dropdown-menu {
        position: static;
        display: none;
        background-color: #1a2e45;
        width: 100%;
        box-shadow: none;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }
    
    .dropdown.active .arrow-down {
        transform: rotate(225deg);
        border-color: #ffd700;
    }
	.logo-tagline {
        display: inline-block;
    }
}

/*Hero banner style*/
.heroBanner{background: url("images/nctps_heroBanner_v1.jpg") no-repeat top center; background-size: cover; padding: 0 2rem; }
.heroBanner .heroBanPadd{max-width: 1366px; min-height: 697px; margin: auto;display: flex; justify-content: flex-start; align-items: center; position: relative}
.heroBanner .heroCopycont{max-width: 600px; margin: 40px 0}
.heroBanner .heroCopycont h1{font-size: clamp(2.125rem, 1.6359rem + 2.1834vw, 3.5rem); font-family: "Merriweather", serif; margin: 20px 0;color: #fff; text-shadow: 0 0 50px black;}
.heroBanner .heroCopycont span.preHeading{font-size: clamp(1.125rem, 1.0022rem + 0.4367vw, 1.375rem); color: #fff}
.heroBanner .heroCopycont p{font-size: clamp(1.25rem, 1.1272rem + 0.4367vw, 1.5rem); color: #fff; text-wrap-style: pretty;}
.heroBanner .nctpfLogo{position: absolute; right: 0; top: 30px}
.heroBanner .stats-container{display: flex; gap:40px; margin: 50px 0 0}
.heroBanner .stats-container p{font-size: .75rem; margin-top: 5px; text-align: center; text-wrap-style: pretty;}
.heroBanner .stats-container h3{background-color: #ffd000; height: 50px; width:50px; border-radius: 50px; display: flex; justify-content: center; align-items: center;}
.heroBanner .stats-container h3 span{font-size: 0.875rem; color: #373737}

/*unload dreams style*/
.unlockDreams{background-color: #dde8fe; padding: 3rem 2rem;}
.unlockDreams .udPaddcont{max-width: 1366px; margin: auto; display: flex; gap: 40px;}
.unlockDreams .udPaddcont .udImg{width: 35%;}
.unlockDreams .udPaddcont .udImgMob{display: none}
.unlockDreams .udPaddcont .udImg img{border-radius: 10px; object-fit: cover; height: 100%}
.unlockDreams .udPaddcont .udCopy{width: 65%; color: #000}
.unlockDreams .udPaddcont .udCopy h2{font-size: clamp(1.75rem, 1.1951rem + 1.5284vw, 2.65rem); font-family: "Merriweather", serif; font-weight: 400; margin-bottom: 20px}
.unlockDreams .udPaddcont .udCopy p{font-size: clamp(1rem, 1.0022rem + 0.4367vw, 1.325rem); line-height: 1.4; text-wrap-style: pretty;}

/*equity in education style*/
.equityEdu{background-color: #fff; padding: 3rem 2rem;}
.equityEdu .equityPadd{max-width: 1366px; margin: auto; display: flex; gap: 40px; color: #000;}
.equityEdu .equityPadd > div{width: 25%}
.equityEdu .equityPadd .eqIcon{border-radius: 50px; padding: 15px; background-color: #dce9fe; margin-bottom: 15px}
.equityEdu .equityPadd h3{font-size: clamp(1.25rem, 1.1272rem + 0.4367vw, 1.5rem); font-family: "Merriweather", serif; font-weight: 400; margin-bottom: 20px}
.equityEdu .equityPadd p{font-size: clamp(1rem, 0.9386rem + 0.2183vw, 1.125rem); line-height: 1.3; font-weight: 400; color: #373737}

.equityEdu.outTeam{background-color: transparent; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;}
.equityEdu.outTeam .equityPadd{max-width: 1566px;}
.equityEdu.outTeam .equityPadd .teamPics{border-radius: 30px; padding: 20px; background-color: #dce9fe; margin-bottom: 15px; width: 100%;}
.equityEdu.outTeam .equityPadd h3{text-align: center;}
.equityEdu.outTeam .equityPadd h3 span{font-size: 16px; display: block; margin: 5px 0 30px;}
.equityEdu.outTeam .equityPadd p.teamBio{font-size: 16px; padding: 5px 10px; background: #DCE9FE; background: linear-gradient(0deg,rgba(220, 233, 254, 0) 0%, rgba(220, 233, 254, 1) 100%); border-radius: 10px; padding: 20px;}
.equityEdu.outTeam .equityPadd p.teamBio span{min-height: 430px; padding: 5px; overflow: hidden; display: block; text-overflow: ellipsis;}

.aboutBotLinks a{display: inline-block; margin-right: 20px;}
.aboutBotLinks a::before{content: "◉"; padding-right: 7px; color: #b52a42;}
.aboutBotLinks a:hover{border: none; color: #b52a42;}

/*trusted by gen style*/
.trustedbygen{background-color: #eff5ff; padding: 3rem 2rem;}
.trustedbygen .tbgPadd{max-width: 1366px; margin: auto; color: #000;}
.trustedbygen .tbgTitle{text-align: center}
.trustedbygen .tbgTitle h2{font-size: clamp(1.75rem, 1.1951rem + 1.5284vw, 2.65rem); font-family: "Merriweather", serif; font-weight: 400; margin-bottom: 20px}
.trustedbygen .tbgTitle p{font-size: clamp(1rem, 0.8772rem + 0.4367vw, 1.25rem); line-height: 1.3; color: #373737}
.trustedbygen .tbgQuotes{display: flex; margin: 30px 0 20px;}
.trustedbygen .tbgQuotes .quotesBox{background-color: #fff; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; margin: 10px;}
.trustedbygen .tbgQuotes .customerQuoteCont img{height: 13px}
.trustedbygen .tbgQuotes p.customerQuote{font-size: 14px; line-height: 1.5; font-weight: 300; color: #373737; font-style: italic; background: url("images/nctps_quote.jpg") no-repeat 0 0; padding-left: 30px; margin-top: 5px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 7; -webkit-box-orient: vertical;}
.trustedbygen .tbgQuotes p.customerName{font-size: 12px; line-height: 1.3; font-weight: 600; color: #727272; ;border-top: 1px solid #efefef; padding-top: 15px; margin-top: 15px; display: flex; justify-content: space-between;}
.trustedbygen .tbgQuotes p.customerName > span{display: block; color: #727272}
.trustedbygen .tbgQuotes p.customerName > span img{height: 13px}
.trustedbygen .tbgQuotes p.customerName .custIcon{float: left; margin-right: 10px; border-radius: 30px;}
.trustedbygen .moreLinks{display: flex; justify-content: center; margin: 50px 0 0 0; gap: 20px;}
.trustedbygen .moreLinks > a{color: #13284d; border-bottom: 1px dashed #13284d;}
.trustedbygen .moreLinks > a:hover{border: none;}

/*Contact us style*/
.nctpfContact{background-color: #13284d; padding: 2.5rem 2rem;}
.nctpfContact .contPadd{max-width: 1366px; margin: auto;  color: #eff5ff;}
.nctpfContact .contTitle{text-align: center}
.nctpfContact .contTitle h2{font-size: clamp(1.75rem, 1.1951rem + 1.5284vw, 2.65rem); font-family: "Merriweather", serif; font-weight: 400; margin-bottom: 20px}
.nctpfContact .contTitle p{font-size: clamp(1rem, 0.8772rem + 0.4367vw, 1.25rem); line-height: 1.3; font-weight: 300; max-width: 900px; margin: auto}
.nctpfContact .contBoxs{display: flex; flex-direction: row; gap:40px; justify-content: center; margin: 40px 0 0;}
.nctpfContact .contBoxs > div{background-color: #253d5d; border: 1px solid #253d5d; border-radius: 10px; width: 300px;; padding: 30px; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 20px;}
.nctpfContact .contIcon{border-radius: 50px; padding: 15px; background-color: #4d627b;}
.nctpfContact .contBoxs h3{color: #f7f7f7; font-size: 16px;}
.nctpfContact .contBoxs p{color: #a6c2e3; font-size: 14px;}
.nctpfContact .contBoxs a{color: #dbeafe;}
.nctpfContact .contBoxs a:hover{text-decoration: underline; color: #fff;}
.nctpfContact .contDisc{margin: 60px auto 0; padding: 20px 0 0; border-top:1px solid #4d627b;  opacity: .8;text-align: center;}
.nctpfContact .contDisc p{font-size: 12px; margin: 5px 0; padding: 5px 0; color: #718cad;}

/*footer style*/
.nctpfFooter{background-color: #081628; padding: 2.5rem 2rem;}
.nctpfFooter .footPadd{max-width: 1366px; margin: auto;  color: #eff5ff; display: flex; justify-content: space-between; gap: 40px;}
.nctpfFooter .footleft{display: flex; flex-direction: column; gap: 20px; max-width: 500px; font-size: 14px; color: #9ca3af;width: 40%;}
.nctpfFooter .flLogo{display: flex; flex-direction: row; gap:15px; justify-content: flex-start; align-items: center;}
.nctpfFooter .flLogo h2{font-family: "Merriweather", serif; font-size: 18px; font-weight: 400; color: #9ca3af;}
.nctpfFooter .flLogo h2 span{display: block; font-size: 14px;font-weight: 300; line-height: 1.3; padding-top: 5px;font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;}
.nctpfFooter .flLogo img{ height: 35px; }
.nctpfFooter .flCopy{font-size: 14px; line-height: 1.5; opacity: .8; background-color: #13284d; padding: 15px;}
.nctpfFooter .flIcons{display: flex; flex-direction: row; gap: 20px;}
.nctpfFooter .flIcons .fiemail{background: url("images/nctps_icon-email2.jpg") no-repeat 0 0; padding-left: 25px;}
.nctpfFooter .flIcons .fiphone{background: url("images/nctps_icon-phone2.jpg") no-repeat 0 0; padding-left: 25px;}
.nctpfFooter .flIcons > a:hover{text-decoration: underline; color: #f4f4f4;}
.nctpfFooter .footRight{width: 50%;}
.nctpfFooter .footRight h4{color: #fff; margin-bottom: 20px;}
.nctpfFooter .footRight .footlink{display: flex; flex-direction: row; gap: 40px; font-size: 14px; color: #9ca3af;justify-content: flex-end;}
.nctpfFooter .footRight .footlink > div{display: flex; flex-direction: column; gap: 10px; width: 25%;}
.nctpfFooter .footRight .footlink > div > a:hover{text-decoration: underline; color: #f4f4f4;}
.nctpfcopyRight{background-color: #081628; padding: 0 2rem 1.5rem }
.nctpfcopyRight .footPadd{border-top: 1px solid #1f2937; max-width: 1366px; margin: auto; display: flex; justify-content: space-between; gap: 20px;}
.nctpfcopyRight .footPadd p{margin: 20px 0; color: #9ca3af;font-size: 14px; line-height: 1.5;}
.nctpfcopyRight .footPadd p:last-child{display: flex; align-items: center; gap:3px}

.aboutPageTitle {padding: 20px; text-align: center; background-color: #1d3d75;}
.aboutPageTitle h1{font-size: clamp(2.125rem, 1.6359rem + 2.1834vw, 3rem); font-family: "Merriweather", serif; font-weight: 600; color: #fff;}

/*aboutPageCopy style*/
.aboutPageCopy{background-color: #dde8fe; padding: 1rem 2rem 3rem;}
.aboutPageCopy .udPaddcont{max-width: 1366px; margin: auto; display: flex; gap: 40px;}
.aboutPageCopy .udPaddcont.withImg .udImg{width: 35%;}
.aboutPageCopy .udPaddcont .udImgMob{display: none}
.aboutPageCopy .udPaddcont .udImg img{border-radius: 10px; object-fit: cover; height: 100%}
.aboutPageCopy .udPaddcont .udCopy{color: #000}
.aboutPageCopy .udPaddcont.withImg .udCopy{width: 65%; color: #000}
.aboutPageCopy .udPaddcont .udCopy h2{font-size: clamp(1.75rem, 1.1951rem + 1.5284vw, 2.65rem); font-family: "Merriweather", serif; font-weight: 400; margin-bottom: 20px}
.aboutPageCopy .udPaddcont .udCopy p{font-size: clamp(1rem, 1.0022rem + 0.4367vw, 1.325rem); line-height: 1.4; text-wrap-style: pretty; margin-bottom: 20px;}

.inBodyCopyImg{display: flex; gap: 50px; justify-items: center; align-items: center;}
.inBodyCopyImg h4{font-size: clamp(1.125rem, 0.818rem + 1.0917vw, 1.75rem); font-family: "Merriweather", serif; font-weight: 400;}

#backtotop {display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; font-size: 20px; line-height: 1; background-color: #b52a42; color: white; padding: 10px;  border-radius: 5px; text-decoration: none; transform: rotate(90deg);}
#backtotop:hover {background-color: #555;}
.newHrline{margin: 40px 0 20px; display: block; height: 1px; border-top: 1px dashed #000;}

@media (max-width: 1366px) {
    #ourTeam{padding-left: 10px; padding-right: 10px;}
    .equityEdu.outTeam .equityPadd{gap: 20px;}
    .equityEdu.outTeam .equityPadd .teamPics{padding: 10px;}
    }
@media (max-width: 1250px) {
.equityEdu.outTeam .equityPadd{overflow-x: scroll; scroll-snap-type: x mandatory; padding-bottom: 20px; gap: 20px;}
.equityEdu.outTeam .equityPadd > div{flex: 0 0 35%; scroll-snap-align: center;}
.equityEdu.outTeam .equityPadd p.teamBio span{min-height: 300px;}
}

@media (max-width: 1100px) {
	.heroBanner .heroCopycont{max-width: 500px;}
	.heroBanner .heroBanPadd{min-height: 530px;}
	.heroBanner .nctpfLogo img{height: 100px; top:10px}
	.unlockDreams .udPaddcont .udImg{width: 40%;}
	.unlockDreams .udPaddcont .udCopy{width: 60%;}
    .nctpfContact .contBoxs{gap: 20px;}
	
    #backtotop{bottom: 10px; right: 10px;}

    .equityEdu.outTeam .equityPadd > div{flex: 0 0 30%;}

    .inBodyCopyImg{gap: 20px;}
    .inBodyCopyImg img{width: 100px;}
  
}
@media (max-width: 900px) {
	.unlockDreams, .equityEdu, .trustedbygen, .nctpfContact, .nctpfFooter, .nctpfcopyRight{padding: 1.5rem}
	.unlockDreams .udPaddcont{flex-direction: column}
	.unlockDreams .udPaddcont .udImg{display: none}
	.unlockDreams .udPaddcont .udImgMob{display: block; margin-bottom: 1rem}
	.unlockDreams .udPaddcont .udImgMob img{border-radius: 10px}
	.unlockDreams .udPaddcont > div{width: 100%!important}
	.equityEdu .equityPadd{overflow-x: scroll; scroll-snap-type: x mandatory; padding-bottom: 20px}
	.equityEdu .equityPadd > div{flex: 0 0 40%; scroll-snap-align: center;}
    .nctpfFooter .footPadd{flex-direction: column;}
    .nctpfFooter .footPadd > div{width: 100%; max-width: none;}
    .nctpfFooter .footRight .footlink{justify-content: flex-start;}

    .nctpfcopyRight .footPadd{flex-direction: column;gap: 0;}
    .nctpfcopyRight .footPadd p{margin: 20px 0 0;}

    .trustedbygen .moreLinks{flex-wrap: wrap; gap: 10px; align-content: center;}
    .trustedbygen .moreLinks > a{border: 1px dashed #13284d; padding: 5px; text-align: center; padding: 5px 10px;}
    .trustedbygen .moreLinks > a:hover{background-color: #13284d; border: 1px solid #13284d; color: #fff;}

    
}
@media (max-width: 768px) {
	.heroBanner{background-position: -470px 0}
	.heroBanner .stats-container{gap:20px; margin: 30px 0 0}
	.heroBanner .heroCopycont{max-width: 400px;}
	.heroBanner .heroBanPadd{min-height: 400px;}
	.navbar, .heroBanner{padding-left: 1rem; padding-right: 1rem}
    
	.equityEdu.outTeam .equityPadd > div{flex: 0 0 60%;}
}
@media (max-width: 540px) {
	.heroBanner .nctpfLogo{display: none}
	.equityEdu .equityPadd > div{flex: 0 0 45%;}
    .nctpfContact .contBoxs{flex-direction: column;}
    .nctpfContact .contBoxs > div{ width: 100%;}
    .nctpfContact .contDisc{border: none; margin-top: 0;}
    /* .nctpfFooter .footRight .footlink > div{width: 46%;} */
    .nctpfFooter .footRight h4{margin-bottom: 10px;}

    
    .equityEdu.outTeam .equityPadd > div{flex: 0 0 75%;}
}
@media (max-width: 430px) {
	.logo-tagline {display: none;}
	.equityEdu .equityPadd > div{flex: 0 0 65%;}
    
}