/*=========================================
 TRANSCONNEX PROFESSIONAL STYLESHEET
 Version 2.0
=========================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{

--primary:#0B3D91;
--primary-dark:#082C6C;
--secondary:#6C757D;
--light:#F8F9FA;
--white:#FFFFFF;
--dark:#1F2937;
--border:#E5E7EB;
--danger:#DC3545;
--success:#198754;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
font-size:16px;
line-height:1.8;
background:var(--white);
color:var(--dark);
overflow-x:hidden;

}

a{

text-decoration:none;
transition:.35s ease;

}

img{

max-width:100%;
display:block;

}

section{

padding:100px 0;

}

/*=========================================
 NAVBAR
=========================================*/

.navbar{

background:#fff;
padding:18px 0;
transition:.35s;
box-shadow:0 3px 20px rgba(0,0,0,.05);

}

.navbar-brand img{

height:60px;

}

.nav-link{

color:var(--dark);
font-weight:500;
margin-left:18px;

}

.nav-link:hover{

color:var(--primary);

}

.navbar-toggler{

border:none;

}

.navbar-toggler:focus{

box-shadow:none;

}

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

.btn-primary,
.btn-warning{

background:var(--primary);
border:none;
color:#fff;
padding:14px 34px;
border-radius:50px;
font-weight:600;
transition:.35s;

}

.btn-primary:hover,
.btn-warning:hover{

background:var(--primary-dark);
color:#fff;
transform:translateY(-2px);

}

.btn-outline-light{

padding:14px 34px;
border-radius:50px;
font-weight:600;

}

.btn-secondary{

background:var(--secondary);
border:none;
color:#fff;

}

.btn-danger{

background:var(--danger);
border:none;

}

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

.hero{

height:100vh;

}

.carousel-item{

height:100vh;
background-size:cover;
background-position:center;

}

.carousel-item:nth-child(1){

background-image:url('../images/slider1.jpg');

}

.carousel-item:nth-child(2){

background-image:url('../images/slider2.jpg');

}

.carousel-item:nth-child(3){

background-image:url('../images/slider3.jpg');

}

.hero-overlay{

height:100vh;
background:rgba(0,0,0,.60);
display:flex;
align-items:center;

}

.hero span{

font-size:18px;
font-weight:600;
color:#9CC3FF;
letter-spacing:2px;
text-transform:uppercase;

}

.hero h1{

font-size:64px;
font-weight:700;
color:#fff;
margin:20px 0;

}

.hero p{

font-size:20px;
color:#f5f5f5;
max-width:700px;
margin-bottom:35px;

}

/*=========================================
 PAGE BANNER
=========================================*/

.page-banner{

padding:120px 0 80px;
background:linear-gradient(rgba(11,61,145,.92),rgba(11,61,145,.92)),
url('../images/banner.jpg') center/cover;
color:#fff;
text-align:center;

}

.page-banner h1{

font-size:48px;
font-weight:700;
margin-bottom:15px;

}

.page-banner p{

font-size:18px;
max-width:700px;
margin:auto;

}
/*=========================================
 SECTION TITLE
=========================================*/

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title h2{

font-size:42px;
font-weight:700;
color:var(--dark);
margin-bottom:18px;

}

.section-title p{

max-width:720px;
margin:auto;
color:var(--secondary);

}

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

.about-section{

background:#fff;

}

.about-section img{

width:100%;
border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.about-section h2{

font-size:42px;
font-weight:700;
margin-bottom:20px;

}

.about-section p{

color:var(--secondary);
margin-bottom:18px;

}

/*=========================================
 SERVICES
=========================================*/

.services{

background:var(--light);

}

.service-card{

background:#fff;
padding:40px 30px;
border-radius:18px;
border:1px solid var(--border);
transition:.35s;
height:100%;

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:0 20px 45px rgba(0,0,0,.10);

}

.service-icon{

width:80px;
height:80px;
margin:auto;
margin-bottom:25px;
background:var(--primary);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:32px;

}

.service-card h4{

font-size:24px;
font-weight:600;
margin-bottom:15px;

}

.service-card p{

color:var(--secondary);

}

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

.why-us{

background:#fff;

}

.feature-box{

background:#fff;
padding:35px;
border-radius:18px;
border:1px solid var(--border);
transition:.35s;
height:100%;

}

.feature-box:hover{

transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.feature-box i{

font-size:42px;
color:var(--primary);
margin-bottom:20px;

}

.feature-box h5{

font-weight:600;
margin-bottom:15px;

}

.feature-box p{

color:var(--secondary);

}

/*=========================================
 STATISTICS
=========================================*/

.stats{

background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#fff;

}

.stat-box{

text-align:center;

}

.stat-box h2{

font-size:52px;
font-weight:700;
margin-bottom:10px;

}

.stat-box p{

font-size:18px;

}

/*=========================================
 INDUSTRIES
=========================================*/

.industries{

background:#fff;

}

.industry-card{

padding:35px;
border:1px solid var(--border);
border-radius:18px;
text-align:center;
transition:.35s;
height:100%;

}

.industry-card:hover{

background:var(--primary);
color:#fff;
border-color:var(--primary);

}

.industry-card i{

font-size:42px;
color:var(--primary);
margin-bottom:20px;

}

.industry-card:hover i{

color:#fff;

}

/*=========================================
 CALL TO ACTION
=========================================*/

.cta{

background:linear-gradient(rgba(11,61,145,.92),rgba(11,61,145,.92)),
url('../images/cta.jpg') center/cover;
text-align:center;
color:#fff;

}

.cta h2{

font-size:48px;
font-weight:700;
margin-bottom:20px;

}

.cta p{

max-width:700px;
margin:0 auto 35px;
font-size:18px;

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

.form-control,
.form-select{

padding:15px 18px;
border-radius:12px;
border:1px solid var(--border);
box-shadow:none;

}

.form-control:focus,
.form-select:focus{

border-color:var(--primary);
box-shadow:0 0 0 .2rem rgba(11,61,145,.15);

}

textarea{

resize:none;

}

/*=========================================
 CONTACT
=========================================*/

.contact-info{

padding:35px;
background:#fff;
border-radius:18px;
border:1px solid var(--border);
height:100%;

}

.contact-info h5{

margin-top:25px;
font-weight:600;

}

.contact-info i{

color:var(--primary);
margin-right:10px;

}

/*=========================================
 NEWS
=========================================*/

.news-card{

background:#fff;
border-radius:18px;
overflow:hidden;
border:1px solid var(--border);
transition:.35s;
height:100%;

}

.news-card:hover{

transform:translateY(-8px);
box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.news-card img{

width:100%;
height:230px;
object-fit:cover;

}

.news-card .content{

padding:25px;

}

.news-card h4{

font-size:22px;
margin-bottom:12px;

}

.news-card p{

color:var(--secondary);

}

.news-meta{

font-size:14px;
color:#888;
margin-bottom:15px;

}

/*=========================================
 TRACKING RESULT
=========================================*/

.tracking-box{

background:#fff;
border-radius:18px;
padding:35px;
border:1px solid var(--border);
box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.tracking-box h3{

margin-bottom:25px;

}

.tracking-box table{

margin-bottom:0;

}

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

.footer{

background:#082C6C;
padding:80px 0 20px;
color:#fff;

}

.footer h5{

margin-bottom:20px;
font-weight:600;

}

.footer p{

color:#d6dbe5;

}

.footer ul{

list-style:none;
padding:0;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul li a{

color:#d6dbe5;

}

.footer ul li a:hover{

color:#fff;
padding-left:6px;

}

.footer hr{

border-color:rgba(255,255,255,.15);

}

.social-links{

display:flex;
gap:12px;
margin-top:20px;

}

.social-links a{

width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.10);
color:#fff;
transition:.35s;

}

.social-links a:hover{

background:var(--primary);
transform:translateY(-4px);

}

/*=========================================
 UTILITIES
=========================================*/

.rounded-20{

border-radius:20px;

}

.shadow-lg-custom{

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

}

.text-primary{

color:var(--primary)!important;

}

.bg-primary{

background:var(--primary)!important;

}

/*=========================================
 ANIMATIONS
=========================================*/

.service-card,
.feature-box,
.industry-card,
.news-card{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}
/*=========================================
 RESPONSIVE DESIGN
=========================================*/

/* Large Screens */

@media (min-width:1400px){

.hero h1{

font-size:72px;

}

.container{

max-width:1320px;

}

}

/* Tablets */

@media (max-width:991px){

section{

padding:80px 0;

}

.navbar{

padding:15px 0;

}

.nav-link{

margin-left:0;
padding:12px 0;
text-align:center;

}

.hero{

height:auto;

}

.hero-overlay{

height:auto;
padding:160px 0 100px;

}

.carousel-item{

height:auto;
min-height:700px;

}

.hero h1{

font-size:46px;

}

.hero p{

font-size:18px;

}

.section-title h2{

font-size:36px;

}

.about-section h2{

font-size:36px;

}

.cta h2{

font-size:38px;

}

.service-card,
.feature-box,
.industry-card,
.news-card{

margin-bottom:30px;

}

.footer{

text-align:center;

}

.social-links{

justify-content:center;

}

}

/* Mobile */

@media (max-width:768px){

section{

padding:70px 0;

}

.hero-overlay{

padding:140px 0 80px;

}

.hero h1{

font-size:34px;
line-height:1.3;

}

.hero p{

font-size:16px;

}

.page-banner{

padding:100px 0 60px;

}

.page-banner h1{

font-size:34px;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:30px;

}

.about-section h2{

font-size:30px;

}

.cta h2{

font-size:32px;

}

.stat-box{

margin-bottom:35px;

}

.btn-primary,
.btn-warning,
.btn-outline-light{

display:block;
width:100%;
margin-bottom:15px;

}

.service-card{

padding:30px 25px;

}

.feature-box{

padding:25px;

}

.contact-info{

margin-bottom:30px;

}

.news-card img{

height:210px;

}

}

/* Small Phones */

@media (max-width:576px){

body{

font-size:15px;

}

.hero h1{

font-size:28px;

}

.hero span{

font-size:15px;

}

.page-banner h1{

font-size:28px;

}

.section-title h2{

font-size:28px;

}

.about-section h2{

font-size:28px;

}

.cta h2{

font-size:28px;

}

.service-icon{

width:70px;
height:70px;
font-size:28px;

}

.stat-box h2{

font-size:42px;

}

.footer{

padding:60px 0 20px;

}

.footer h5{

margin-top:20px;

}

.social-links{

gap:10px;

}

}

/*=========================================
 SMOOTH EFFECTS
=========================================*/

.card,
.service-card,
.feature-box,
.industry-card,
.news-card,
.btn{

transition:all .35s ease;

}

img{

transition:transform .4s ease;

}

.service-card:hover img,
.news-card:hover img{

transform:scale(1.03);

}

/*=========================================
 END OF STYLESHEET
=========================================*/