/*
	Author: Rakibul Hassan Rifat

*/

/*
	=========Index=========
	01) Global CSS
	02)	Header Section 
	03) About Section
	04) Purpose Section
	05) Proposal Section
	06) Testimonial Section
	07) Our Service Section
	08) Team Section
	09) Pricing Section
	10) Location Section
	11) Try Us Section
	12) Footer Section
	========================
*/



/*========Import Section Start========*/

@import url('../css/fonts.css');

/*========Import Section End========*/

/*========Variable Section Start========*/
:root{

	/*Theme Colors*/
	--text-gray:#3f4954;
	--text-light:#686666da;
	--bg-color:#0f0f0f;
	--white:#ffffff;
	--mid-night: #104f55;

	/*Gradient Color*/
	--sky:linear-gradient(120deg,#a1c4fd 0%, #c2e9fb 100%);

	--shadow-color:0px 10px 30px rgba(118,85,225,0.3);
	--box-shadow: 0px 10px 30px rgba(57,56,61,0.205);

	/*=========Font Family==========*/

	/* Professional Google Fonts - loaded in index.html */
	--heading-font:'Montserrat', sans-serif;
	--body-font:'Inter', sans-serif;
}
/*========Variable Section End========*/

/*=======01) Global CSS Section=======*/
/*======= Professional Typography =======*/
body{
	font-family: var(--body-font);
	font-weight: 400;
}

small,
a,
li{
	font-family: var(--body-font);
}

h4,
h5,
h6{
	font-family: var(--heading-font);
	font-weight: 600;
}

h1{
	font-family: var(--heading-font);
	font-size: 2.5rem;
	font-weight: 600;
}
h2{
	font-family:var(--heading-font);
	font-size: 28px;
	font-weight: 600;
	color: #576671;
}
h3{
	font-family:var(--heading-font);
	font-size: 1.5rem;
	font-weight: 600;
}
p{
	font-family:var(--body-font);
	font-size: 13px;
	text-align: center;
	line-height: 35px;
}
span{
	font-family:var(--body-font);
}

section {
	padding: 90px 0;
}
.img-center{
	display: block;
	margin: 0 auto;
}
.no-padding{
	padding: 0;
}
.primary{
	color: #17daa3;
}
.heading-space{
	padding-bottom: 40px;
}
.topbar{
	/*position: fixed;
	width: 100%;
	top: -1px;
	left: 0;
	right: 0;*/
	background: var(--mid-night);
	box-shadow: var(--box-shadow);
	z-index: 999;
	transition: all 1s ease;
	padding:0;
}


/*=======02) Header Section=======*/
header .navbar-brand img{
	width: 50%;
	filter: brightness(0)invert(1);
}
header .navbar-brand span{
	font-family: var(--heading-font);
	font-weight: 600;
}
header ul li{
	font-family: var(--body-font);
	font-variant: normal;
	padding: 0 10px;
}

header ul li a{
	font-family: var(--body-font);
	font-weight: 500;
}
header ul li a:hover{
	color: #17daa3 !important;
}
#slider1 ol li,
#slider2 ol li{
	border-radius: 50%;
	width: 10px;
	height: 10px;
}
#slider1 .carousel-caption{
	top: 285px;
}
#slider1 .carousel-caption button{
	border-radius: 20px 20px;
}

/*========03) About Section=======*/
#about span,
#our-service span,
#team span,
#pricing span {
	height: 5px;
	width: 50px;
	display: inline-block;
	background: #424242;
}
.abt-content-logo {
	color: #87949e;
	font-size: 40px;
	width: 120px;
	background: #edeff1;
	height: 120px;
	margin: 0 auto;
	border-radius: 50%;
	padding: 20px;
}
.abt-content-logo:hover{
	background: #17daa3;
	color: #fff;
	cursor: pointer;
}
.abt-head{
	margin-top: 30px;
}
.abt-btn{
	margin-top: 50px;
	background: #0bca94;
	border: 1px solid #0bca94;
	padding: 8px 22px;
	border-radius: 20px 20px;
}
.abt-btn:hover{
	background: #fff;
	border: 1px solid #0bca94;
	color: #333;
	padding: 8px 22px;
}

/*========04) Purpose Section=======*/
#purpose{
	background: #f9f9fa;
}
#purpose img,
#proposal img{
	max-height: 400px;
	border-radius: 5px;
}
.purpose-content,
.proposal-content{
	padding: 55px 0;
}
.purpose-content small,
.proposal-content small{
	display: block;
	line-height: 30px;
	padding: 25px 0px;
	margin-right: 80px;
	text-align: justify;
}
/*========05) Proposal Section=======*/


/*========06) Testimonial Section=======*/
.crs-img-1{
	background: url('../img/slider-img1.jpg');
	background-size: cover;
	background-position: center;
	width:100%;
}
.crs-img-2{
	background: url('../img/slider-img2.jpg');
	background-size: cover;
	background-position: center;
	width:100%;
}
.crs-img-3{
	background: url('../img/slider-img3.jpg');
	background-size: cover;
	background-position: center;
	width:100%;
}
.crs-img-4{
	background: url('../img/slider-img4.jpg');
	background-size: cover;
	background-position: center;
	width:100%;
}
#myCarousel .carousel-item{
	height: 500px;
}
#myCarousel .carousel-caption{
	top: 75px;
}
#myCarousel .carousel-caption img{
	width: 90px;
	border-radius: 50%;
	height: 90px;
}
#myCarousel .carousel-caption h4{
	padding: 15px 0;
	color:white;
}
#myCarousel .carousel-caption span{
	color: #0bca94;
}
#myCarousel .carousel-caption ssmallpan{
	color:white;
}


/*========07) Our Service Section*/

#our-service{
	background: #f9f9fa;
}
#our-service .os-main{
	margin-top: 50px;
}
#our-service .os-logo{
	font-size: 35px;
	color: #17daa3;
	width: 80px;
	height: 80px;
	background: #fff;
	padding: 13px;
	border-radius: 50%;
	margin: 0 auto;
}
/*========08) Team Section*/
#team .card{
	transition: all 0.7s ease;
}
#team .card:hover{
	border: none;
	background:#17daa3;
	color: #fff;
	cursor: pointer;
	box-shadow: var(--box-shadow);
	transform: scale(1.1);
}


/*========09) Pricing Section*/

#pricing{
	background: #f9f9fa;
}
#pricing .card h2{
	color: #17daa3;
	cursor: pointer;
}
#pricing .card-header{
	padding: 30px 10px;
}
#pricing .card-footer{
	padding: 1px;
	overflow: hidden;
}
#pricing .btn{
	background: #17daa3;
	border-radius: 2px;
	border-style: none;
	text-transform: uppercase;
	transition: all 0.5s ease;
}
#pricing .btn:hover{
	transform: scale(1.1);
}
#pricing .btn:focus, #pricing .btn:active{
	outline: none !important;
   	box-shadow: none;
}
#pricing .svg-inline--fa.fa-briefcase.fa-w-16.float-right{
	font-size: 20px;
	margin-left: 115px;
}

/*========10) Location Section*/


/*========11) Try Us Section*/
#try-us {
	background: url('../img/try.png')no-repeat;
	background-size: cover;
	min-height: 400px;
	background-position: center;
}


/*========12) Footer Section=======*/


footer{
	background: var(--bg-color);
	position: relative;
}
footer h3{
	color:var(--white);
}
footer form .btn-custom{
	padding: 8px;
	border-radius: 0 !important;
	width: 100%;
	margin-top: 10px;
}
footer img{
	margin-bottom:10px;
}
footer a{
	color: var(--white);
	padding: 15px 5px;
}
footer a:hover{
	color: var(--mid-night);
}
footer p{
	color: var(--text-gray);
	text-align: center;
}

/*=======Media Query======*/
@media(max-width: 991px){
	#slider1 .carousel-caption{
		top: 220px;
	}
	#team .team-sqd , #pricing .pricing-sqd{
		margin-bottom:10px;
	}
}
@media(max-width: 919px){
	
	footer .container,
	footer .container .row{
		margin: 0;
	}
	footer #insta{
		display: contents;
	}

}
@media(max-width: 767px){
	#slider1 .carousel-caption{
		top: 155px;
	}

	#pricing .card .prcs-footer label:last-child{
		width: 10%;
	}
	footer .footer-up{
		margin-bottom: 15px;
	}
	footer #insta , footer #follow{
		width: 65%;
	}
}

@media(max-width: 575px){	
	header .navbar-brand img {
		width: 40%;
	}
	#slider1 .carousel-caption{
		top: 100px;
	}
	#slider1 .carousel-caption p{
		line-height: 1;
	}
	.purpose-content, .proposal-content {
		margin: 0 auto;
		width: 85%;
	}
}
@media(max-width: 490px){
	#slider1 .carousel-caption{
		top: 75px;
		}	#slider1 .carousel-caption h2{
			font-size: 24px;
		}
		#myCarousel .carousel-caption {
			top: 17px;
		}
		#myCarousel .carousel-caption h4 {
			font-size: 19px;
		}
		#myCarousel .carousel-caption img {
			width: 60px;
			height: 60px;
		}

	}

	@media(max-width: 395px){
		#slider1 .carousel-caption{
			top: 75px;
		}
		header .navbar-brand{
			margin: 0;
			width: 80%;
		}
		#slider1 .carousel-caption p{
			display: none;
		}
		.abt-content h4{
			margin-top: 0;
		}
		.abt-content small{
			margin-bottom: 10px;
			display: block;
		}
		#purpose{
			padding-bottom: 0;
		}

		#proposal{
			padding: 0;
		}
		#myCarousel .carousel-caption h4 {
			padding: 0;
		}
		footer p {
			width: 78%;
		}
	}

	@media(max-width: 335px){
		header nav .navbar-toggler{
			margin: 0 auto;
			width: 20%;
			border: none;
		}
		#slider1 .carousel-caption h2{
			font-size: 18px;
		}
		#slider1 .carousel-caption button{
			padding: 6px;
			display: block;
			font-size: 10px;
			margin: 0 auto;
			border-radius: 15px 15px;
		}
		.purpose-content small, .proposal-content small{
			line-height: 1.5;
		}
		#myCarousel .carousel-caption {
			top: 0px;
		}
		#slider2 .carousel-item h4{
			font-size:15px;
			margin-bottom: 0;
		}
		#myCarousel .carousel-caption small{
			display: none;
		}
	}

/*======== Targeted Mobile / Responsive Fixes ========*/
/* Keep the existing desktop design unchanged while making the
   navigation and narrow layouts stable across mobile widths. */
html,
body {
	overflow-x: hidden;
}

header .navbar {
	width: 100%;
}

header .navbar > .container {
	width: 100%;
}

header .navbar-brand {
	display: flex;
	align-items: center;
	min-width: 0;
	max-width: calc(100% - 56px);
}

header .navbar-brand img {
	width: auto;
	max-width: 55px;
	height: auto;
	flex: 0 0 auto;
}

header .navbar-brand span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 991px) {
	header .navbar {
		padding-left: 12px;
		padding-right: 12px;
	}

	header .navbar > .container {
		padding-left: 0;
		padding-right: 0;
	}

	header .navbar-toggler {
		margin-left: auto;
		flex: 0 0 auto;
	}

	header .navbar-collapse {
		flex-basis: 100%;
		width: 100%;
	}

	header .navbar-nav {
		width: 100%;
		padding: 8px 0 10px;
	}

	header ul li {
		padding: 0;
		text-align: center;
	}

	header ul li a {
		display: block;
		padding: 9px 12px;
	}
}

@media (max-width: 575px) {
	header .navbar-brand {
		max-width: calc(100% - 52px);
	}

	header .navbar-brand img {
		max-width: 48px;
	}

	header .navbar-brand span {
		font-size: 16px;
	}

	#slider1 .carousel-caption {
		left: 12%;
		right: 12%;
	}

	.purpose-content small,
	.proposal-content small {
		margin-right: 0;
	}

	footer #insta,
	footer #contact-us {
		width: 100%;
	}
}

@media (max-width: 395px) {
	header .navbar-brand {
		width: auto;
		margin: 0;
	}

	header .navbar-brand img {
		max-width: 42px;
	}

	header .navbar-brand span {
		font-size: 15px;
		padding-left: 6px !important;
		padding-right: 0 !important;
	}

	header .navbar-toggler {
		margin-left: auto;
		padding: 4px 8px;
	}

	header .navbar-collapse {
		margin-top: 4px;
	}

	header .navbar-nav {
		background: rgba(0, 0, 0, 0.12);
	}

	#slider1 .carousel-caption {
		top: 75px;
		left: 10%;
		right: 10%;
	}
}

@media (max-width: 335px) {
	header .navbar-toggler {
		width: auto;
		margin-left: auto;
		border: 1px solid rgba(255,255,255,.5);
	}

	header .navbar-brand {
		max-width: calc(100% - 50px);
	}

	header .navbar-brand span {
		font-size: 14px;
	}
}


/* =====================================================
   MOBILE FOOTER ALIGNMENT FIX
   ===================================================== */

@media (max-width: 919px) {

	footer {
		width: 100%;
		overflow: hidden;
	}

	footer .container {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		padding: 35px 28px 20px;
	}

	footer .container > .row {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding: 0 !important;
	}

	footer .container > .row > .col-lg-3,
	footer .container > .row > .col-md-6 {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin: 0 0 30px 0 !important;
		padding: 0 !important;
	}

	/* Override the old display: contents rule */
	footer #insta {
		display: block !important;
		width: 100% !important;
	}

	footer #contact-us {
		display: block !important;
		width: 100% !important;
	}

	footer .footer-up {
		margin-bottom: 30px !important;
	}

	footer h3 {
		margin: 0 0 14px 0 !important;
		font-size: 22px;
		line-height: 1.3;
		text-align: left;
	}

	footer p.text-light {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 14px;
		line-height: 1.7;
		text-align: left;
	}

	footer #insta span,
	footer #contact-us span {
		display: block !important;
		width: 100% !important;
		margin: 0 0 8px 0 !important;
		padding: 0 !important;
		font-size: 14px;
		line-height: 1.6;
		text-align: left;
	}

	footer > .container > p {
		display: block;
		width: 100% !important;
		margin: 5px 0 0 0 !important;
		padding: 15px 0 5px !important;
		font-size: 11px;
		line-height: 1.6;
		text-align: center !important;
	}
}

@media (max-width: 575px) {

	footer .container {
		padding-left: 24px;
		padding-right: 24px;
	}

	footer h3 {
		font-size: 21px;
	}

	footer p.text-light,
	footer #insta span,
	footer #contact-us span {
		font-size: 14px;
	}
}

@media (max-width: 395px) {

	footer .container {
		padding-left: 22px;
		padding-right: 22px;
	}

	footer .container > .row > div {
		margin-bottom: 26px !important;
	}

	footer h3 {
		font-size: 20px;
	}

	footer p.text-light,
	footer #insta span,
	footer #contact-us span {
		font-size: 13px;
		line-height: 1.65;
	}

	footer > .container > p {
		font-size: 10px;
		line-height: 1.6;
	}
}


/* =====================================================
   FINAL HEADER + SLIDER FIX
   Fixed navigation stays visible while scrolling.
   Slider starts immediately below the navigation.
   No visible white gap on desktop or mobile.
   ===================================================== */

:root {
    --site-navbar-height: 72px;
}

/* Fixed navigation: always visible while the page scrolls */
#mainNav.navigation {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    background: var(--mid-night) !important;
}

/* Header itself must not create extra white space */
#header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/*
   The navbar is fixed and therefore removed from normal flow.
   Reserve exactly its height inside the dark header overlay.
   Because the overlay is dark, this reserved area is hidden
   behind the fixed menu rather than appearing as white space.
*/
#header > .overlay {
    padding-top: var(--site-navbar-height) !important;
}

/* No artificial margin above the carousel */
#slider1 {
    margin-top: 0 !important;
}

@media (max-width: 991px) {
    :root {
        --site-navbar-height: 62px;
    }
}

@media (max-width: 575px) {
    :root {
        --site-navbar-height: 58px;
    }
}

@media (max-width: 395px) {
    :root {
        --site-navbar-height: 56px;
    }
}

/* =====================================================
   FINAL FIX: REMOVE GRAY STRIP BELOW FIXED NAVBAR
   Keep navbar fixed and place slider immediately below it.
   ===================================================== */

:root {
    --site-navbar-height: 52px;
}

/* Fixed navbar remains visible during page scrolling */
#mainNav.navigation {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
    background: var(--mid-night) !important;
}

/*
   The carousel is inside this overlay. Reserve only the real
   navbar height and use the same color as the navbar, so there
   is no gray band between the menu and the first slide.
*/
#header > .overlay {
    padding-top: var(--site-navbar-height) !important;
    background: var(--mid-night) !important;
}

#slider1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#slider1 .carousel-inner,
#slider1 .carousel-item,
#slider1 .carousel-item img {
    margin-top: 0 !important;
}

@media (max-width: 991px) {
    :root {
        --site-navbar-height: 70px;
    }
}

@media (max-width: 575px) {
    :root {
        --site-navbar-height: 70px;
    }
}

@media (max-width: 395px) {
    :root {
        --site-navbar-height: 70px;
    }
}


/* =====================================================
   COMPACT CONTENT + EXPANDABLE ABOUT
   ===================================================== */
p { font-size: 14.5px; line-height: 1.75; }
#about { padding: 48px 0 65px; }
#about .heading-space { padding-bottom: 24px; }
#about .heading-space > div > h2 { margin-bottom: 8px; }
#about .about-summary { max-width: 900px; margin: 12px auto 0; color: #4f5962; font-size: 15px; line-height: 1.75; }
#aboutMore { max-width: 900px; margin: 0 auto; }
#aboutMore p { margin-bottom: 12px !important; }
.about-toggle { margin-top: 8px; padding: 5px 10px !important; color: var(--mid-night) !important; font-family: var(--body-font); font-size: 14px; font-weight: 600; text-decoration: none !important; }
.about-toggle:hover, .about-toggle:focus { color: #17daa3 !important; text-decoration: none !important; box-shadow: none; }
.about-toggle i { font-size: 11px; transition: transform .2s ease; }
.about-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
#about .row.text-center { margin-top: 8px; }
@media (max-width: 767px) {
  #about { padding: 38px 0 50px; }
  #about .about-summary, #aboutMore { padding-left: 10px; padding-right: 10px; }
  p { font-size: 14px; line-height: 1.7; }
}

/* =====================================================
   SITE-WIDE TYPOGRAPHY ENHANCEMENT
   Increase readability across the whole website while
   keeping the layout clean and avoiding oversized text.
   ===================================================== */
body {
    font-size: 15px;
    line-height: 1.65;
}

p {
    font-size: 15px;
    line-height: 1.7;
}

small {
    font-size: 14.5px;
    line-height: 1.7;
}

h1 {
    font-size: 2.6rem;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 25px;
}

h4 {
    font-size: 19px;
}

header ul li a {
    font-size: 16px;
}

header .navbar-brand span {
    font-size: 20px;
}

.purpose-content small,
.proposal-content small {
    font-size: 15px;
    line-height: 1.8;
}

#our-service p,
#our-service .text-muted {
    font-size: 15px;
    line-height: 1.75;
}

#about .about-summary {
    font-size: 15.5px;
    line-height: 1.75;
}

.about-toggle {
    font-size: 15px;
}

footer p.text-light,
footer #insta span,
footer #contact-us span {
    font-size: 15px;
    line-height: 1.7;
}

footer > .container > p {
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 575px) {
    body {
        font-size: 14.5px;
    }

    p {
        font-size: 14.5px;
        line-height: 1.7;
    }

    small {
        font-size: 14px;
    }

    h2 {
        font-size: 27px;
    }

    h3 {
        font-size: 22px;
    }

    h4 {
        font-size: 18px;
    }

    header ul li a {
        font-size: 16px;
    }

    header .navbar-brand span {
        font-size: 16px;
    }

    .purpose-content small,
    .proposal-content small,
    #our-service p,
    #our-service .text-muted {
        font-size: 14.5px;
        line-height: 1.7;
    }

    footer p.text-light,
    footer #insta span,
    footer #contact-us span {
        font-size: 14.5px;
    }
}


/* =====================================================
   ABOUT SECTION: NO SCROLL-REVEAL ANIMATION
   Keep About Us visible immediately on page load and
   when scrolling back up from the bottom of the page.
   ===================================================== */
#about [data-aos],
#about [data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}


/* Keep Try Us directly connected to the footer with no extra gap. */
#try-us {
    margin-bottom: 0 !important;
}


/* =====================================================
   COMPACT TRY US SECTION
   Reduce the large vertical area before the footer.
   ===================================================== */
#try-us {
    min-height: 0 !important;
    padding: 42px 0 !important;
    margin-bottom: 0 !important;
}

#try-us h2 {
    margin: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

@media (max-width: 767px) {
    #try-us {
        padding: 32px 0 !important;
    }
}


/* =====================================================
   ABOUT CARDS: STABLE DESKTOP SINGLE ROW
   ===================================================== */
@media (min-width: 768px) {
    #about .row.text-center {
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    #about .row.text-center > .abt-content {
        flex: 0 0 25%;
        max-width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #about .abt-head {
        width: 100%;
        white-space: nowrap;
        font-size: 18px;
    }

    #about .abt-content small {
        display: block;
        width: 100%;
    }
}

@media (max-width: 767px) {
    #about .row.text-center {
        display: flex;
        flex-wrap: wrap;
    }

    #about .row.text-center > .abt-content {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #about .abt-head {
        white-space: normal;
    }
}

@media (max-width: 575px) {
    #about .row.text-center > .abt-content {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Prevent AOS from changing the About card layout/opacity. */
#about .abt-content[data-aos],
#about .abt-content[data-aos].aos-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}