@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
body{ margin: 0; padding: 0; font-family: "Work Sans", sans-serif;}
a { text-decoration: none !important;}
p { color: #3d3d3d; font-size: 17px; letter-spacing: .2px; margin: 0 0 10px 0; line-height: 1.7; font-weight: 500;}
.custom-btn {color: #373390; display: inline-block; padding: 5px; font-size: 16px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid #373390; position: relative; z-index: 9; transition: all .3s ease-in-out;}
.custom-btn:hover { color: #373390; letter-spacing: 2px;}

.custom-btn1 { background: #373390; color: #fff; display: inline-block; padding: 12px 40px; font-size: 15px; font-weight: 600; letter-spacing: .5px; border-radius: 5px; border-top-left-radius: 50px; border-bottom-right-radius: 50px; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.1);}
.custom-btn1:hover { color: #fff; animation: zoom-in-zoom-out .5s ease-in-out; transform: scale(1.1, 1.1);}

.heading { font-size: 52px; font-weight: 800; margin: 0 0 40px 0; color: #292929; position: relative; text-transform: uppercase;} 

/*======================== Top header ====================*/
header {z-index: 2; width: 100%; position: absolute;}

.navbar {background: rgba(55, 51, 144, .8);border-radius: 50px 0 0 50px;}
.navbar .nav-item .nav-link {color: #fff !important;padding: 25px 14px !important;font-size: 14px;text-transform: uppercase;font-weight: 700;margin: 0 10px;letter-spacing: .7px;position: relative;}
.navbar .nav-item .nav-link:hover { color: #ffc53a !important;}
.navbar .nav-item .custom-btn { margin-top: -7px;}

.banner-section { position: relative;background: #e2e2e2; background-image: url(../image/banner-bg.png);  padding: 14% 0 10% 0; overflow: hidden;}
.banner-section .text h1{ color: #212121; font-size: 52px; text-transform: uppercase; font-weight: 800; line-height: 1.3; margin: 0 0 40px 0;}
.banner-section .text a { display: inline-block; position: relative; padding: 34px; color: #212121; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .5px; transition: all .3s ease-in-out;}
.banner-section .text a:hover { letter-spacing: 2px;}
.banner-section .text a span { position: relative; z-index: 2;}
.banner-section .text a::after { content: ''; position: absolute; width: 90px; height: 90px; background: #ffc53a; border-radius: 50%; left: 0; top: 0; transition: all .3s ease-in-out;}
.banner-section .text a:hover::after { background: #373390cc;}
.banner-section .banner-img { position: relative;}
.banner-section .banner-img img { position: relative; z-index: 2;}
.banner-section .banner-img::after { position: absolute; content: ''; width: 80%; height: 80%; border: 1px solid #b3b3b3; right: -5%; top: -5%;}
.banner-section .banner-img::before { position: absolute; content: ''; width: 80%; height: 80%; border: 1px solid #b3b3b3; right: -3%; top: -2%;}

.about-section { padding: 12% 0; overflow: hidden;}
.about-section .text { position: relative; padding: 0 5% 0 12%; z-index: 3;}
.about-section .text p { text-align: justify; margin: 0 0 20px 0;}
.about-section .text::after { content: ''; position: absolute; width: 120%; height: 135%; background: #ffc53a; top: -15%; left: 0; z-index: -1;}
.about-section .about-img img{ position: relative; z-index: 9; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;}

.section-3 { padding: 2% 0 5% 0;}
.section-3 .whats-new, .section-3 .Event-Calendar, .section-3 .Timesheet{ background: #2b7258; padding: 50px; overflow: hidden;}
.section-3 .Timesheet { background: #373390;}
.section-3 .Event-Calendar { background: #ffc53a;}
.section-3 .whats-new .icon, .section-3 .Event-Calendar .icon, .section-3 .Timesheet .icon { position: relative; margin: 0 0 90px 0;}
.section-3 .whats-new .icon::after, .section-3 .Event-Calendar .icon::after, .section-3 .Timesheet .icon::after{ content: ''; position: absolute; width: 400px; height: 400px; background: rgba(255, 255, 255, .1); left: -170px; top: -220px; border-radius: 50%;}
.section-3 .whats-new .icon img, .section-3 .Event-Calendar .icon img, .section-3 .Timesheet .icon img{ position: relative; z-index: 2;}
.section-3 .whats-new .text h2, .section-3 .Event-Calendar .text h2, .section-3 .Timesheet .text h2{ color: #fff; font-size: 32px; font-weight: 700; margin: 0 0 15px 0; }
.section-3 .whats-new .text p, .section-3 .Event-Calendar .text p, .section-3 .Timesheet .text p { color: #f4f4f4;}
.section-3 .whats-new .text .custom-btn, .section-3 .Event-Calendar .text .custom-btn, .section-3 .Timesheet .text .custom-btn { color: #fff; border-color: #fff;}
.section-3 .Event-Calendar .text p, .section-3 .Event-Calendar .text h2, .section-3 .Event-Calendar .text .custom-btn { color: #292929; border-color: #292929;}

.service-section {padding: 7% 0; background: #212121; margin: 7% 0; position: relative;}
.service-section::after { position: absolute; content: ''; width: 600px; height: 600px; background: rgba(255, 255, 255, .03); border-radius: 50%; right: 20px; bottom: 30px;}
.service-section .heading { font-size: 62px;}
.service-section .ser-img { position: absolute; top: -10%; left: 4%; width: 45%;}
.service-section .ser-card { border-bottom: 2px solid #7c7c7c; padding:40px 30px;}
.service-section .ser-card p { color: #b3b3b3;}
.service-section .ser-card h3 { color: #fff; font-size: 34px; font-weight: 800; display: flex;}
.service-section .ser-card h3 span { margin: 0 30px 0 0;}
.service-section .ser-card a { color: #ffc53a; font-weight: 700; transition: all .2s ease-in-out;}
.service-section .ser-card a:hover { letter-spacing: 2px;}

.team-section { padding: 4% 0 12% 0; background: linear-gradient(#fff 50%, #212121 50%) ;}
.team-section .team-card { background: #2b7258; border: 15px solid #2b7258;}
.team-section .team-card .text { text-align: center; padding: 20px 20px 10px 20px;}
.team-section .team-card .text h3 { color: #fff; text-transform: uppercase; font-size: 21px; font-weight: 700; initial-letter: .5px;}
.team-section .team-card .text p { color: #e6e6e6; letter-spacing: .3px; margin: 0;}
.team-section .carousel-control-prev-icon, .team-section .carousel-control-next-icon  {background-image: none;}
.team-section .carousel-control-prev-icon img, .team-section .carousel-control-next-icon img {background: #373390;padding: 16px;width: 65px;height: 65px;border-radius: 50%;}
.team-section .carousel-control-next, .team-section .carousel-control-prev { opacity: 1 !important; margin-bottom: -100px; top: 100%; width: 8%;}
.team-section .carousel-control-prev { left: 84%;}

.contact-section { padding: 6% 0 8% 0;}
.contact-section .contact-info { background: #ffc53a; margin: -12% 0 0 10%; padding: 70px 50px 30px 50px;}
.contact-section .contact-info .icon { margin: 0 20px 0 0;}
.contact-section .contact-info .icon i { display: inline-block; background: #fff; color: #373390; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 2.6; font-size: 18px;}
.contact-section .contact-info .text h5 { font-weight: 700; margin: 0 0 5px 0; font-size: 17px; color: #373390;}
.contact-section .contact-info .text p {color: #131313; font-size: 15px; margin: 0 0 30px 0;}
.contact-section .contact-form { padding: 8% 0 0 10%;}
.contact-section .contact-form .form-control { padding: 12px; margin: 0 0 20px 0; border-radius: 0; border: 2px solid #383838; color: #131313;}
.contact-section .contact-form .form-control::placeholder { color: #131313;}
.contact-section .contact-form input[type="button"] { background: #373390; color: #fff; border-radius: 0; border: 0; padding: 15px 34px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px;}

.call-to-action { margin: 0 0 -6% 0; background: #373390; padding: 6%; position: relative; z-index: 2;} 
.call-to-action h4 { color: #fff; font-size: 40px; font-weight: 700; letter-spacing: .5px; margin: 0;}
.call-to-action p i { background: #fff; display: inline-block; padding: 20px; border-radius: 50%; margin: 0 15px 0 0; color: #373390;}
.call-to-action p a{ color: #fff; font-size: 21px; font-weight: 700;}
.call-to-action p a:hover { color: #ffc53a;}

footer {padding: 10% 0 0 0; background: #131313;}
footer h4 {color: #ffc53a;font-size: 20px;text-transform: uppercase; font-weight: 600;margin: 0 0 15px 0;}
footer p, footer p a {color: #dedede;font-size: 15px;font-weight: 500;margin: 0 0 10px 0;}
footer p a:hover {color: #2b7258;}
footer .footer-bottom {margin: 4% 0 0 0;border-top: 1px solid rgba(204, 204, 204, .4);padding: 15px 0;}
footer .footer-bottom p { margin: 0;}


@media (min-width: 320px) and (max-width: 767px){
    p { font-size: 16px;}
    .custom-btn {font-size: 15px;}

    .heading { font-size: 32px; margin: 0 0 25px 0;} 

    .navbar { background: #373390;}
    .navbar .nav-item .nav-link { padding: 10px 0 !important; font-size: 13px; font-weight: 500;}

    .banner-section { padding: 34% 0 10% 0;}
    .banner-section .text h1{ font-size: 32px; margin: 20px 0 ;}
    .banner-section .text a { padding: 20px; font-size: 15px;}
    .banner-section .text a::after { width: 70px; height: 70px;}
    .banner-section .banner-img { margin: 30px 0 0 0;}
    
    .about-section { padding: 8% 0;}
    .about-section .text { position: relative; padding: 0;}
    .about-section .text::after { content: ''; position: absolute; width: 150%; left: -16%; z-index: -1;}
    .about-section .about-img img{ width: 100%; height: 270px; object-fit: cover;}

    .section-3 .whats-new, .section-3 .Event-Calendar, .section-3 .Timesheet{ padding: 30px;}
    .section-3 .whats-new .icon, .section-3 .Event-Calendar .icon, .section-3 .Timesheet .icon {margin: 0 0 30px 0; }
    .section-3 .whats-new .icon img, .section-3 .Event-Calendar .icon img, .section-3 .Timesheet .icon img { width: 70px;}
    .section-3 .whats-new .icon::after, .section-3 .Event-Calendar .icon::after, .section-3 .Timesheet .icon::after{ width: 200px; height: 200px; left: -70px; top: -120px;}
    .section-3 .whats-new .text h2, .section-3 .Event-Calendar .text h2, .section-3 .Timesheet .text h2{ font-size: 24px; margin: 0 0 10px 0;}

    .service-section {padding: 10% 0;}
    .service-section .heading { font-size: 32px; margin: 0; text-align: center;}
    .service-section .ser-img {display: none;}
    .service-section .ser-card { padding:30px;}
    .service-section .ser-card h3 { font-size: 27px; font-weight: 800; margin: 0 0 15px 0;}

    .team-section .team-card { margin: 0 0 15px 0;}
    .team-section .team-card .text { text-align: center; padding: 10px 10px 0 10px;}
    .team-section .carousel-control-prev-icon img, .team-section .carousel-control-next-icon img {width: 50px;height: 50px;}
    .team-section .carousel-control-next, .team-section .carousel-control-prev { width: 15%; margin-bottom: -70px;}
    .team-section .carousel-control-prev { left: 70%;}

    .contact-section .contact-info { margin: -12% 0 0 0; padding: 50px 30px 10px 30px;}
    .contact-section .contact-info .icon { margin: 0 20px 0 0;}
    .contact-section .contact-info .icon i { width: 40px; height: 40px; line-height: 2.4; font-size: 16px;}
    .contact-section .contact-form { padding: 8% 0 0 0;}
    .contact-section .contact-form .form-control { padding: 10px; margin: 0 0 12px 0; border: 1px solid #242424;}
    .contact-section .contact-form input[type="button"] { padding: 12px 24px; font-size: 14px; font-weight: 500;}

    .call-to-action { margin: 0 0 -6% 0; background: #373390; padding: 6%; position: relative; z-index: 2;} 
    .call-to-action h4 {font-size: 24px; margin: 0 0 20px 0;}
    .call-to-action p i { padding: 12px; margin: 0 10px 0 0;}
    .call-to-action p a{ font-size: 18px;}

    footer h4 {margin: 20px 0 10px 0; font-size: 18px;}
    footer p, footer p a { font-size: 14px;}
}

@media (min-width: 768px) and (max-width: 1200px){
    p { font-size: 15px;}
   
    .heading { font-size: 37px; margin: 0 0 30px 0;} 

    .navbar { background: #373390;}
    .navbar .nav-item .nav-link { padding: 10px 0 !important; font-size: 13px; font-weight: 500;}
   
    .banner-section { padding: 15% 0 6% 0;}
    .banner-section .text h1{ font-size: 37px; margin: 0 0 20px 0;}
    .banner-section .text a { padding: 20px; }
    .banner-section .text a::after { width: 64px; height: 64px;}
    .banner-section .banner-img img { position: relative; z-index: 1;}

    .about-section { padding: 6% 0;}
    .about-section .text { position: relative; padding: 0 2%;}
    .about-section .text p { text-align: justify; margin: 0 0 10px 0; font-size: 14px;}
    .about-section .text::after { width: 120%; top: -12%; left: -5%;}
    .about-section .about-img img{ width: 100%; height: 400px; object-fit: cover;}

    .section-3 .whats-new, .section-3 .Event-Calendar, .section-3 .Timesheet{ padding: 30px;}
    .section-3 .whats-new .icon, .section-3 .Event-Calendar .icon, .section-3 .Timesheet .icon { margin: 0 0 40px 0;}
    .section-3 .whats-new .icon img, .section-3 .Event-Calendar .icon img, .section-3 .Timesheet .icon img { width: 70px;}
    .section-3 .whats-new .icon::after, .section-3 .Event-Calendar .icon::after, .section-3 .Timesheet .icon::after{ width: 300px; height: 300px; left: -120px; top: -190px;}
    .section-3 .whats-new .text h2, .section-3 .Event-Calendar .text h2, .section-3 .Timesheet .text h2{ font-size: 24px; font-weight: 700; margin: 0 0 15px 0; }

    .service-section .heading { font-size: 38px; margin: 0 0 10px 0;}
    .service-section .ser-img { top: -5%; width: 42%;}
    .service-section .ser-card { border-bottom: 2px solid #7c7c7c; padding:40px 30px;}
    .service-section .ser-card h3 { font-size: 21px;}
    
    .team-section .team-card { border: 10px solid #2b7258;}
    .team-section .team-card .text { text-align: center; padding:10px;}
    .team-section .team-card .text h3 { font-size: 17px; font-weight: 600;}
    .team-section .carousel-control-prev-icon img, .team-section .carousel-control-next-icon img { padding: 16px; width: 50px;height: 50px;border-radius: 50%;}
    .team-section .carousel-control-next, .team-section .carousel-control-prev { opacity: 1 !important; margin-bottom: -50px; top: 100%; width: 8%;}
    .team-section .carousel-control-prev { left: 84%;}

    .contact-section { padding: 6% 0 8% 0;}
    .contact-section .contact-info { background: #ffc53a; margin: -12% 0 0 0; padding: 30px;}
    .contact-section .contact-info .icon { margin: 0 20px 0 0;}
    .contact-section .contact-info .icon i { display: inline-block; background: #fff; color: #373390; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 2.6; font-size: 18px;}
    .contact-section .contact-info .text h5 { font-weight: 700; margin: 0 0 5px 0; font-size: 17px; color: #373390;}
    .contact-section .contact-info .text p {color: #131313; font-size: 15px; margin: 0 0 30px 0;}
    .contact-section .contact-form { padding: 8% 0 0 10%;}
    .contact-section .contact-form .form-control { padding: 12px; margin: 0 0 20px 0; border-radius: 0; border: 2px solid #383838; color: #131313;}
    .contact-section .contact-form .form-control::placeholder { color: #131313;}
    .contact-section .contact-form input[type="button"] { background: #373390; color: #fff; border-radius: 0; border: 0; padding: 15px 34px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px;}

    .call-to-action { margin: 0 0 -6% 0; background: #373390; padding: 6%; position: relative; z-index: 2;} 
    .call-to-action h4 { color: #fff; font-size: 30px; font-weight: 700; letter-spacing: .5px; margin: 0;}
    .call-to-action p i { background: #fff; display: inline-block; padding: 10px; border-radius: 50%; margin: 0 15px 0 0; color: #373390;}
    .call-to-action p a{ color: #fff; font-size: 17px; font-weight: 700;}
    .call-to-action p a:hover { color: #ffc53a;}

    footer {padding: 10% 0 0 0; background: #131313;}
    footer h4 {color: #ffc53a;font-size: 20px;text-transform: uppercase; font-weight: 600;margin: 0 0 15px 0;}
    footer p, footer p a {color: #dedede;font-size: 15px;font-weight: 500;margin: 0 0 10px 0;}
    footer p a:hover {color: #2b7258;}
    footer .footer-bottom {margin: 4% 0 0 0;border-top: 1px solid rgba(204, 204, 204, .4);padding: 15px 0;}
    footer .footer-bottom p { margin: 0;}
}