@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary-color: #4793ED;
    --secondary-color: #FFCC00;
    --title-color: #FF9500;
    --white-color: #fff;
    --black-color: black;
    --primary-font: "Poppins", sans-serif;
    --times-new-roman: 'Times New Roman', Times, serif;
    --picifico-font: "Pacifico", cursive;
}

.navbar-toggler{
	border-radius: 3px;
    padding: 4px;
}

.carousel.home-carousel {
    overflow: hidden; 
}

.home-carousel .carousel-inner {
    display: flex;
    flex-direction: row;
    transition: transform 0.5s ease-in-out;
}
.service-img{
	aspect-ratio : 4 / 2.7;
}

.home-carousel .carousel-item {
    min-width: 100%;
    transition: transform 3s ease-in-out !important;
}

.home-carousel .carousel-item img {
    height: 90vh;
    object-fit: cover;
	transition: transform 7s ease-in-out !important;
}

.home-carousel .carousel-item.active img {
    animation: scaleEffect 14s linear infinite; /* Control scale animation */
}

@keyframes scaleEffect {
    0% {
        transform: scale(1);
    }
    50%,100% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}



.carousel-indicators {
    list-style-type: none;
}

.carousel-indicators .active {
    background-color: var(--secondary-color) !important;
}

.carousel-indicators li {
    width: 15px !important;
    height: 15px !important;
    border-radius: 50%;
}

header {
    background-color: var(--primary-color);
}

.nav-title {
    font-family: var(--times-new-roman);
    color: var(--secondary-color);
    font-weight: 550;
}

.navbar .nav-item .nav-link {
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--white-color);
    padding: 31px 25px;
}

.active {
    color: var(--secondary-color) !important;
    background-color: rgba(255, 255, 255, 0.2);
}

.about-wrapper {
    padding: 120px 0;
    font-family: var(--primary-font);
}

.about-wrapper .row {
    padding-bottom: 22px;
}

.about-wrapper .about-image-wrapper {
    padding-left: 40px;
}

.about-wrapper .about-image {
    position: relative;
	width: 450px;
    height: 450px;
}

.about-image-2 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 7px solid #fff;
    border-radius: 50%;
}

.about-wrapper .about-image::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 20px;
    left: 8%;
    background-color: var(--primary-color);
    border-radius: 50%;
    z-index: -1;
}

.about-wrapper .about-image img {
    width: 100%;
    height: 100%;
	transform: scale(1.16);
}

.aside-title {
    margin-top: 20px;
    font-size: 16px;
    font-family: var(--picifico-font);
    color: var(--title-color);
}

.heading {
    font-size: 30px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 15px 0;
}

.about-wrapper p {
    font-size: 16px;
    font-weight: 500;
    text-align: justify;
}

.button {
    margin-top: 15px;
    display: inline-block;
    text-decoration: none;
    background-color: var(--primary-color);
    color: white;
    padding: 15px 21px;
    border-radius: 8px;
    transition: background-color .5s ease-in-out;
}

.button:hover {
    background-color: #01346b;
}

.service-wrapper {
    background: url(../images/service-background.png);
    font-family: var(--primary-font);
}

.service-wrapper .container {
    padding: 140px 0;
    display: flex;
    justify-content: center;
}

.service-wrapper .header {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 40px;
    position: relative;
}

.service-wrapper .header::after {
    content: '';
    width: 20%;
    height: 100%;
    position: absolute;
    top: 65px;
    left: 890px;
    transform: translate(-447px, -32px);
    background-image: url(../images/wave-line.png);
    background-repeat: no-repeat;
}

.service-wrapper p {
    text-align: justify;
    font-size: 16px;
    font-weight: 500;
	word-spacing: 4px;
}

footer {
    background: linear-gradient(to bottom, var(--primary-color),#1560B0);
}

footer .logo{
	width: 110px;
}

footer a {
    text-decoration: none;
    color: var(--white-color);
    font-size: 16px;
    margin-top: 10px;
}

footer p {
    font-size: 16px;
    color: var(--white-color);
}

footer .container {
    padding: 50px 0px;
    display: grid;
    grid-template-columns: 3.5fr 4fr 2fr;
    gap: 50px;
    font-family: var(--primary-font);
}

footer .nav-title {
    text-align: center;
    padding-top: 10px;
}

.footer-header {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    font-family: var(--primary-font);
}


.address,
.call,
.mail {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 10px;
}

.call,
.mail {
    gap: 16px;
}

.call .icon,
.mail .icon {
    padding-top: 5px;
}

.icon {
    object-fit: contain;
}

footer .content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

footer .content a {
    display: block;
    padding: 2px 0;
    font-weight: 500;
}

footer .footer-nav,
footer .social-media-icons {
    padding-left: 77px;
}

/* about-us page */

.banner {
    position: relative;
}

.banner-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 550;
    font-size: 30px;
    font-family: var(--primary-font);
}

.about-us-wrapper {
    font-family: var(--primary-font);
}


.about-us-wrapper .about-content {
    display: flex;
    gap: 60px;
    padding: 100px 0 90px 0;
    border-bottom: 1px solid rgba(217, 217, 217, 1);
}

.about-us-wrapper p {
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    text-align: justify;
    padding-top: 10px;
}

.about-us-wrapper .objectives {
    padding: 80px 0;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 100px;
}

.objectives .header {
    font-size: 30px;
    font-weight: 600;
    color: var(--primary-color);
}

.objectives ul {
    padding-left: 2px !important;
    padding-top: 15px;
}

.objectives li {
    list-style-type: none;
    font-weight: 600;
    font-size: 16px;
    padding-top: 10px;
}

.objectives li span {
    padding-left: 8px;
}

.about-us-wrapper .message-container {
    background: url(../images/background-image.png);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
}

.message-container .content {
    display: grid;
    grid-template-columns: auto auto;
    padding: 90px 70px;
    color: var(--white-color);
    gap: 70px;
}

.message-container .content .header {
    color: var(--title-color);
    text-align: center;
    margin: 30px 0;
    font-size: 30px;
    font-weight: 600;
}

.message-container .content p {
    display: flex;
    align-items: start;
    gap: 15px;
}

.about-us-wrapper .certificates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    row-gap: 40px;
    padding: 80px 15px;
    height: 100%;
}

.certificates .image-wrapper {
    width: 100%;
}

.certificates .image-wrapper img {
    height: 100%;
}

/* service page */

.services-wrapper .content {
    display: grid;
    grid-template-columns: auto auto;
    gap: 30px;
    padding: 90px 0 40px 0;
    font-family: var(--primary-font);
}

.services-wrapper .header {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 30px;
}

.services-wrapper  p {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--primary-font);
    text-align: justify;
}

.services-wrapper .content p {
    padding-top: 10px;
    line-height: 30px;
}

.services-wrapper .text p {
    line-height: 30px;
}

.services-wrapper .content .text-wrapper {
    padding-right: 30px;
}

.services-wrapper .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 90px 35px 100px 35px;
}

.services-wrapper .card {
    background: white !important;
    height: 280px;
    border: none;
    box-shadow: 0px 6px 6px rgb(240, 238, 238);
    border-radius: 15px !important;
}

.services-wrapper .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.services-wrapper .cards .card-title {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
    text-align: center;
    padding-top: 20px;
}

.contact-wrapper .contact-form {
    padding: 100px 20px;
    display: grid;
    grid-template-columns: 2.5fr 2fr;
    gap: 30px;
}

.contact-wrapper .contact-form .info {
    padding-left: 50px;
}

.contact-form .header {
    font-family: var(--primary-font);
    margin-bottom: 30px;
    font-size: 30px;
}

.contact-wrapper .contact-form .inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form .form-group input,
.contact-form .form-group textarea {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid rgba(217, 217, 217, 1);
}

.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
    font-family: var(--primary-font);
    color: var(--black-color);
}

.contact-form .form-group textarea {
	height: 120px;
    margin-top: 10px;
}

.contact-form .button {
    margin-top: 15px;
    color: var(--white-color);
}

.contact-wrapper .rectangle {
    background-color: var(--primary-color);
    border-radius: 15px;
    box-shadow: 0px 6px 15px rgb(196, 195, 195);
}


.contact-wrapper .site-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.contact-form .footer-header {
    margin-top: 30px;
	margin-bottom: 20px;
    color: var(--black-color);
    font-size: 20px;
    font-weight: 600;
}


.contact-form a {
    text-decoration: none;
    color: var(--black-color);
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 500;
}

.contact-form p {
    font-size: 16px;
    font-family: var(--primary-font);
    font-weight: 500;
}

.contact-wrapper .site-map {
    padding: 0 20px 110px 20px;
}

.contact-wrapper .call {
	padding-top: 10px;
}

.contact-wrapper .mail {
	padding-top: 20px;
}


@media (max-width: 1440px) {
    .about-wrapper .text-content {
        padding-top: 35px;
        padding-right: 40px !important;
    }

    .carousel-item img {
        height: auto !important;
    }
}

@media (max-width: 1024px) {

    .carousel-item img {
        height: auto !important;
    }

    .nav-title {
        font-size: 24px !important;
    }
	
	.about-wraper .about-image {
		margin-top: 50px !important;
	}

    .about-wrapper .about-image,
	.about-wrapper .about-image::after {
        width: 350px !important;
        height: 350px !important;
    }

    .service-wrapper .header::after {
        width: 24% !important;
        left: 750px !important;
    }

    .about-us-wrapper .objectives {
        gap: 50px;
        padding-right: 17px !important;
        padding-left: 10px !important;
    }

    .objectives .header {
        font-size: 23px !important;
    }

    .message-container .content {
        gap: 35px !important;
    }

    .message-container .content .header {
        margin: 20px 0 !important;
    }

    .message-container .content p {
        line-height: 25px !important;
    }
	
	/* about-us page */
	
	.about-us-wrapper .about-content {
		gap: 40px !important;
		padding-right: 10px !important;
	}
	
	.about-us-wrapper .about-content img {
		width: 48% !important;
	}

    /* service page */

    .service-wrapper .content {
        padding: 90px 0 20px 0 !important;
    }

    .services-wrapper p {
        line-height: 28px !important;
    }

    /* contact us page */

    .contact-wrapper .contact-form {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
	
	.contact-wrapper .call {
		padding-top: 0 !important;
	}
	
	.contact-wrapper .mail {
		padding-top: 10px !important;
	}

    footer .container {
        padding-right: 30px;
    }

    footer .footer-nav,
    footer .social-media-icons {
        padding-left: 30px !important;
    }
}

@media (max-width: 992px) {

    .carousel-item img {
        height: auto !important;
    }

    .banner-nav {
        font-size: 25px !important;
    }

    p {
        font-size: 14px !important;
    }

    .heading {
        font-size: 26px !important;
        margin: 10px 0 !important;
    }

    .button {
        font-size: 14px !important;
    }

    .about-wrapper {
        overflow: hidden;
        padding: 80px 0 !important;
    }

    .about-wrapper .about-image {
        width: 400px !important;
        height: 400px !important;
    }

    .about-wrapper .about-image::after {
        width: 400px !important;
        height: 400px !important;
    }

    .about-image-wrapper {
        padding-left: 80px !important;
    }

    .about-wrapper .text-content {
        padding: 52px 60px 0 60px !important;
    }

    .service-wrapper .container {
        padding: 60px 0 !important;
    }

    .service-wrapper p {
        padding: 0 40px !important;
    }

    .service-wrapper .header::after {
        width: 26% !important;
        left: 727px !important;
    }

    .service-wrapper .header {
        font-size: 22px !important;
    }

    .service-wrapper .header::after {
        top: 60px !important;
        width: 21% !important;
        left: 738px !important;
    }

    .service-wrapper .text-center {
        padding-top: 0 !important;
    }

    .about-us-wrapper .about-content {
        padding: 70px 40px 40px 40px !important;
        flex-direction: column !important;
        gap: 30px !important;
    }
	
	.about-us-wrapper .about-content img {
		width: auto !important;
	}

    .about-us-wrapper p {
        line-height: 22px !important;
    }

    .about-us-wrapper .objectives {
        grid-template-columns: auto !important;
        gap: 20px !important;
        padding: 40px !important;
    }

    .about-us-wrapper li {
        font-size: 14px !important;
    }

    .message-container .content {
        grid-template-columns: auto !important;
    }

    .message-container .content .director-image {
        text-align: center;
    }

    .message-container .content .header {
        font-size: 24px !important;
    }

    .check-mark-icon {
        width: 20px !important;
    }

    /* service page */

    .services-wrapper .container {
        padding: 0 40px !important;
    }

    .services-wrapper .content {
        grid-template-columns: auto !important;
        gap: 40px !important;
        padding-bottom: 10px !important;
    }

    .services-wrapper .cards {
        padding-top: 50px !important;
        gap: 20px !important;
    }

    .services-wrapper .card {
        height: auto !important;
    }

    .services-wrapper .card img {
        width: 80px !important;
    }

    .services-wrapper .card-title {
        font-size: 16px !important;
    }

    /* contact page */

    .contact-wrapper .contact-form {
        grid-template-columns: auto !important;
        gap: 40px !important;
        padding: 80px 40px !important;
    }

    .contact-form .info {
        padding-left: 0 !important;
    }

    footer .container {
        grid-template-columns: 2.5fr 4fr 2fr !important;
        padding-right: 10px !important;
        gap: 30px !important;
    }

    .footer-header {
        font-size: 20px !important;
    }
}


/* 992 px for tablet , 767 for mobile */

@media (max-width: 767px) {

    .carousel-item img {
        height: auto !important;
    }

    p,a {
        font-size: 12px !important;
    }

    .nav-title {
        font-size: 18px !important;
    }

    .nav-link {
        font-size: 16px !important;
    }

    .banner img {
        height: 150px !important;
    }

    .banner-nav {
        font-size: 18px !important;
    }

    .heading {
        font-size: 22px !important;
    }

    .carousel-indicators li {
        width: 10px !important;
        height: 10px !important;
    }

    .about-image-wrapper {
        padding-left: 40px !important;
    }

    .about-wrapper .about-image {
        width: 350px !important;
        height: 350px !important;
    }

    .about-wrapper .about-image::after {
        width: 350px !important;
        height: 350px !important;
    }

    .about-wrapper .text-content {
        padding: 65px 40px 0 40px !important;
    }

    .service-wrapper .header::after {
        top: 60px !important;
        width: 36% !important;
        left: 577px !important;
    }

    .service-wrapper p {
        padding: 0 20px !important;
    }

    footer .container {
        grid-template-columns: auto !important;
        padding: 30px 40px !important;
    }

    footer .text-center {
        text-align: left !important;
    }

    footer .nav-title {
        text-align: left !important;
    }

    footer .container > div:first-child {
        display: flex;
        flex-direction: row !important;
    }

    footer .footer-nav, footer .social-media-icons {
        padding-left: 0px !important;
    }

    .footer-header {
        font-size: 17px !important;
    }

    /* about-us page */

    .about-us-wrapper {
        overflow: hidden !important;
    }

    .about-us-wrapper .heading {
        margin: 4px !important;
    }

    .about-us-wrapper .content {
        gap: 18px !important;
    }

    .objectives .header {
        font-size: 20px !important;
    }

    .objectives .rectangle-icon {
        width: 25px !important;
    }

    .message-container {
        margin: 0 2px !important;
    }

    .message-container .content {
        padding: 50px 20px !important;
    }

    .director-image img {
        width: 310px !important;
    }

    .message-container .content .header {
        font-size: 18px !important;
        margin: 10px !important;
    }

    .message-container .content p {
        line-height: 20px !important;
    }

    .message-container .content p {
        gap: 8px !important;
    }

    .about-us-wrapper .certificates {
        padding: 50px 15px !important;
        grid-template-columns: auto !important;
    }

    .services-wrapper .content {
        gap: 20px !important;
    }

    .services-wrapper .header {
        font-size: 20px !important;
    }

    .services-wrapper p {
        line-height: 22px !important;
    }

    .services-wrapper .cards {
        grid-template-columns: auto !important;
    }

    .form-control {
        font-size: 12px !important;
    }
}

@media screen and (max-width:385px) and (min-width: 280px) {

    .navbar .nav-item .nav-link {
        font-size: 12px !important;
        padding: 20px 25px !important;
    }

    .logo {
        width: 50px !important;
    }

    .nav-title {
        font-size: 16px !important;
    }

    .about-wrapper .about-image-wrapper {
        padding-left: 13px !important;
    }

    .about-wrapper .about-image,
    .about-wrapper .about-image::after {
        width: 280px !important;
        height: 280px !important;
    }

    .service-wrapper .header::after {
        top: 60px !important;
        width: 43% !important;
        left: 543px !important;
    }

    .check-mark-icon {
        width: 15px !important;
    }

    .director-image img {
        width: 220px !important;
    }

    .form-control {
        font-size: 8px !important;
    }

    .contact-form {
        padding: 60px 20px !important;
    }

    .contact-form .header {
        font-size: 22px !important;
    }

    .footer-header {
        font-size: 14px !important;
    }
}