:root {

  --primary-color: #163C45; 

  --secondary-color: #6495ed; 

  --background-dark: #021A20; 

  --text-color-white: #fff; 

  --background-color-1: #FFE8C7; 

  --footer-bg: #262E27;

    --background-color: #ffffff; 

    --default-color: #444444; 

    --heading-color: #5f687b; 

    --accent-color: #021A20; 

    --surface-color: #ffffff; 

    --contrast-color: #ffffff; 

}









body{

      font-family: "Source Serif 4", serif;

      padding: 0;

      margin: 0;

      font-size: 18px;

      color: var( --primary-color);

}



.container{

    max-width:1450px;

    @media (max-width:1024px) {

        padding-left: 20px;

        padding-right: 20px;

    }

}
.navbar {

    padding-top: 1.0rem;

    padding-bottom:1.0rem;

    font-size: 1.15rem;

}

.nav-item{

    padding: 0 5px;

     @media (max-width:1024px) {

         padding: 0 5px;

     }

}

.navbar-expand-lg .navbar-nav .nav-link {

     color: var( --primary-color);

     padding: 1.25rem;

     transition: all 0.3s ease;

     font-weight: 500;

     @media (min-width:992px) and (max-width:1134px) {

      padding: 1.25rem 0.65rem;

     }

}

.navbar-expand-lg .navbar-nav .nav-link:hover{

    background-color: var( --primary-color);

    color: var(  --text-color-white);

     border-radius:5px;

}



.navbar-expand-lg .navbar-nav .nav-link.active{

    background-color: var( --primary-color);

    color: var(  --text-color-white);

}

.carousel {

    @media (max-width:1024px) {

        padding-left:0;

    padding-right:0;

 

    }

}

.carousel-indicators [data-bs-target]{

    background-color: var(--background-dark);

}

.carousel-item h1 {

    margin-bottom: 20px;

    font-weight: 700;

    font-size: 48px;

    @media (max-width:767px) {

        font-size: 38px;

    }

      @media (max-width:480px) {

          font-size: 32px;

      }

}



.navbar-light .navbar-toggler{

    border-color: var(--background-dark);

}

.m-ps{

   @media (max-width:767px) {

       position: absolute;

        padding: 30px;

        text-align: center;

        background: radial-gradient(black, transparent);

        color: #FFF;

        width: 100%;

        box-sizing: border-box;

        left: 0;

        right: 0;

        margin: auto;

   }  

}

.carousel-item p {

    padding-bottom: 20px;

    display:block;

    font-weight:300;

     @media (max-width:480px) {

        font-size: 14px;

     }

}

.btn-secondary,

.btn-primary,

.carousel-item .bt.btn-primary {

    padding:16px;

    background: var( --primary-color);

    text-decoration:none;

    box-sizing: border-box;

    transition: all 0.3s ease;

}



.carousel-item .bt.btn-primary svg{

    margin-left:8px;

    margin-top: -5px;

     transition: all 0.3s ease;

}



.carousel-item .bt.btn-primary:hover{

    border-radius:5px;

    transition: all 0.3s ease;

   

}



.carousel-item .bt.btn-primary:hover svg{

    transform:rotate(45deg);

        transition: all 0.3s ease;

}

.carousel-item img {

    border-radius: 10px 0 0 10px;

    @media (max-width:480px) {

        border-radius: 0;

        

    }

}

.section-1{

    margin: 54px auto;

     background-color:var(--background-color-1);

     @media (max-width:480px) {

          margin: 0px auto 30px; 

     }

     .container{

        padding-top: 80px;

        padding-bottom: 80px;

         h2 {

            padding: 20px 0;

             font-weight:600;

            

        }



        p {

        padding-bottom: 20px;

         font-weight:500;

         margin-bottom:0;

            font-size:16px

        }

        a{

            color:var( --primary-color);

            font-weight:500;

            text-decoration:none;

             @media (max-width:768px) {

                

             }

            &:hover{

                text-decoration:underline; 

            }

        }

     }

     

}





.section-2{

     margin: 180px auto 60px;

     background-color: var(--background-dark);

    p{

        color:var(--text-color-white);

        

    }

    h3{

        color:var(--text-color-white);

        font-size:40px;

        max-width:65%;

        padding-top:80px;

        padding-bottom:60px;

         @media (max-width:768px) {

            max-width:100%;

             font-size:30px;

         }

    }

    .split-1{

        img {

            margin-top: -80px;

            margin-bottom:45px;

            @media (max-width:768px) {

              width:100%;  

             }

        }

        p{

            max-width:80%;

             @media (max-width:768px) {

              width:100%;  

              max-width:100%;

             }

        }

    }

    .split-2{

         img {

            margin-bottom: -180px;

            position: relative;

            z-index: 0;

            @media(max-width:1270px){

                width: 100%;

            }

        }

        .pic{

             position: relative;

        }

         .pic:before {

                 content: '';

                 position: absolute;

                 background: url("../images/pattren.svg");

                 background-repeat: no-repeat;

                 width: 170px;

                 z-index: 111;

                 height: 127px;

                 right: 44px;

                 top: -46px;

                  @media(max-width:768px){

                     right: 4px;

                  }

                }

    }

    img {

        border-radius:10px;

    }

}



.provide{

        margin: 60px auto;

        h4{

            font-size: 48px;

            font-weight: 700;

            color: var(--background-dark);

            @media(max-width:1270px){

                font-size: 38px;

            }

        }

        .inner{

            margin-top: 120px;

            /*font-family: "Poppins", sans-serif;*/
			font-family: "Source Serif 4", serif;
			

            .icon{

                border-radius: 5px;

                margin-top: -55px;

                 @media(max-width:480px){

                     margin-top: -45px;

                 }

                img{

                     border-radius:5px;

                      @media(max-width:480px){

                        width:50px

                      }

                }

            }

            h5{

            font-weight: 500;

            padding: 18px 0;

            }



            p{

                font-weight: 400;

                font-style: normal;

                font-size: 18px;

                padding: 0px 0 18px;

                margin-bottom: 0;

            }

            a{

                color: var(--background-dark);

                 font-weight: 500;

                 text-decoration: none;

                  font-size: 18px;

                  svg{

                    margin-left: 10px;

                     transition: all 0.3s ease;

                  }

                  &:hover{

                    svg{

                     margin-left: 20px;

                      transition: all 0.3s ease;

                    } 

                  }

            }

        }



        .info.m2 {

            border: 3px solid #e9ecef;

            border-radius: 13px;

            padding: 15px 15px 30px;

        }

        .mb-3{

            margin-bottom: 100px!important;

             @media(max-width:680px){

                 margin-bottom: 60px!important;

             }

        }

}



.cta-section {

    padding-top: 75px;

    background: url(../images/cta.png);

    padding-bottom: 75px;

    text-align: center;

    color: var(--text-color-white);

    background-size: cover;

    

    

    

    h5{

        font-weight: 600;

        font-size: 48px;

        padding-bottom: 16px;

    }

    p{

        padding-bottom: 32px;

        max-width: 50%;

        margin-left: auto;

        margin-right: auto;

        @media(max-width:768px){

              max-width:90%;

        }

    }

    a{

        background-color: var(--text-color-white);

        padding: 20px;

        font-weight: 600;

        color:var(--background-dark);

        text-decoration: none;

    }

}



footer{

    background-color: var(--footer-bg);

    padding-top: 35px;

    padding-bottom: 35px;

    font-size: 18px;



      @media (min-width:992px)  {

         .col-lg-2 {

          width: 25.666667%;

         }

            .col-lg-6 {

          width: 40%;

        }

    }

    .footer-logo{

        margin:auto;

        text-align:center;

        padding-bottom:50px;

    }

    ul {

        list-style:none;

        margin:0;

        padding:0;

        li {

            margin:0;

            padding:0 0 15px; 

            a{

                word-break: break-all;

                color:var(--text-color-white);

                text-decoration:none;

                transition: all 0.3s ease;

                &:hover{

                    color:var(--background-color-1);

                }

            }

        }

    }



    hr{

       border-bottom: 2px solid var(--text-color-white);

    }

    h6{

        color:var(--text-color-white);

        font-size:20px;

        font-weight:500;

        padding-bottom: 15px;

    }

    .copy{

        color:#FFF;

        font-size: 18px;

        text-align: center;

        a{

            text-decoration: none;

            transition: all 0.3s ease;

            padding: 5px;

        }

    }

}









.inner-banner{

  position:relative;

  height: 380px;

  background-repeat: no-repeat;

  margin-bottom: 30px;

  @media (max-width:767px) {

      height: 250px;

  }

}

.inner-banner:after {

  content: '';

  background-color: rgba(17, 16, 16, 0.55);

  position:absolute;

  top:0;

  width:100%;

  height: 100%;

  z-index: 11;

}

.inner-banner .inner-content {

    position: absolute;

    bottom: 30px;

    color: var(--text-color-white);

    z-index: 99;

    margin: auto;

    left: 0;

    right: 0;

    padding-left: 20px;

}



.inner-banner .inner-content h1{

    font-family: "Poppins", sans-serif;

	font-weight:500;

}

.breadcrumb {

	font-size:14px; 

    font-family: "Poppins", sans-serif;

}

.breadcrumb-item+.breadcrumb-item::before,

.breadcrumb a{

	color:var(--text-color-white);

	text-decoration: none;

}

.breadcrumb-item.active{

	color:var(--background-color-1);

}







.contact-info-item {

  display: flex;

  margin-bottom: 30px;

}



.contact-info-icon {

  height: 70px;

  width: 70px;

  background-color: #fff;

  text-align: center;

  border-radius: 50%;

}



.contact-info-icon i {

  font-size: 30px;

  line-height: 70px;

}



.contact-info-content {

  margin-left: 20px;

}



.contact-info-content h4 {

  color: var(--background-dark);

  font-size: 1.4em;

  margin-bottom: 5px;

}



.contact-info-content p {

  color: var(--background-dark);

  font-size: 1em;

}



.contact-form {

  

  padding: 40px;



  padding-bottom: 20px;

  padding-top: 20px;

}



.contact-form h2 {

  font-weight: bold;

  font-size: 2em;

  margin-bottom: 10px;

  color: #333;

}



.contact-form .input-box {

  position: relative;

  width: 100%;

  margin-top: 10px;

}



.contact-form .input-box input,

.contact-form .input-box textarea{

  width: 100%;

  padding: 5px 0;

  font-size: 16px;

  margin: 10px 0;

  border: none;

  border-bottom: 2px solid #333;

  outline: none;

  resize: none;

}



.contact-form .input-box span {

  position: absolute;

  left: 0;

  padding: 5px 0;

  font-size: 16px;

  margin: 10px 0;

  pointer-events: none;

  transition: 0.5s;

  color: #666;

}



.contact-form .input-box input:focus ~ span,

.contact-form .input-box textarea:focus ~ span{

  color: #e91e63;

  font-size: 12px;

  transform: translateY(-20px);

}



.contact-form .input-box input[type="submit"]

{

  width: 100%;

  background: var(--background-dark);

  color: #FFF;

  border: none;

  cursor: pointer;

  padding: 10px;

  font-size: 18px;

  border: 1px solid var(--background-dark);

  transition: 0.5s;

}



.contact-form .input-box input[type="submit"]:hover

{

  background: #FFF;

  color: var(--background-dark);

}





.feature {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  height: 4rem;

  width: 4rem;

  font-size: 2rem;

}



.bg-primary{

    background-color: var(--background-dark)!important;

}





.team .team-member {

  background-color: var(--surface-color);

  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  border-radius: 5px;



}



.team .team-member .member-img {

  position: relative;

  overflow: hidden;

}

.team .team-member .member-img:hover{

    cursor: pointer;

}

.team .team-member .social {

  position: absolute;

  left: 0;

  bottom: 0;

  right: 0;

  height: 40px;

  opacity: 0;

  transition: ease-in-out 0.3s;

  background: color-mix(in srgb, var(--background-dark), transparent 20%);

  display: flex;

  align-items: center;

  justify-content: center;

}



.team .team-member .social a {

  transition: color 0.3s;

  color: var(--heading-color);

  margin: 0 10px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.team .team-member .social a i {

  line-height: 0;

  color: var(--text-color-white);

}



.team .team-member .social a:hover {

  color: var(--accent-color);

}



.team .team-member .social i {

  font-size: 18px;

  margin: 0 2px;

}



.team .team-member .member-info {

  padding: 25px 15px;

  text-align: center;

}



.team .team-member .member-info h4 {

  font-weight: 700;

  margin-bottom: 5px;

  font-size: 18px;

  color: color-mix(in srgb, var(--default-color), transparent 20%);

}



.team .team-member .member-info span {

  display: block;

  font-size: 13px;

  font-weight: 400;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.team .team-member .member-info p {

  font-style: italic;

  font-size: 14px;

  line-height: 26px;

  color: color-mix(in srgb, var(--default-color), transparent 40%);

}



.team .team-member:hover .social {

  opacity: 1;

}









.service-details .service-box {

  background-color: var(--surface-color);

  padding: 20px;

  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);

}



.service-details .service-box+.service-box {

  margin-top: 30px;

}



.service-details .service-box h4 {

  font-size: 20px;

  font-weight: 700;

  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);

  padding-bottom: 15px;

  margin-bottom: 15px;

}



.service-details .services-list {

  background-color: var(--surface-color);

}



.service-details .services-list a {

  color: color-mix(in srgb, var(--default-color), transparent 20%);

  background-color: color-mix(in srgb, var(--default-color), transparent 96%);

  display: flex;

  align-items: center;

  padding: 12px 15px;

  margin-top: 15px;

  transition: 0.3s;

}



.service-details .services-list a:first-child {

  margin-top: 0;

}



.service-details .services-list a i {

  font-size: 16px;

  margin-right: 8px;

  color: var(--accent-color);

}



.service-details .services-list a.active {

  color: var(--contrast-color);

  background-color: var(--accent-color);

}



.service-details .services-list a.active i {

  color: var(--contrast-color);

}



.service-details .services-list a:hover {

  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);

  color: var(--accent-color);

}



.service-details .download-catalog a {

  color: var(--default-color);

  display: flex;

  align-items: center;

  padding: 10px 0;

  transition: 0.3s;

  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}



.service-details .download-catalog a:first-child {

  border-top: 0;

  padding-top: 0;

}



.service-details .download-catalog a:last-child {

  padding-bottom: 0;

}



.service-details .download-catalog a i {

  font-size: 24px;

  margin-right: 8px;

  color: var(--accent-color);

}



.service-details .download-catalog a:hover {

  color: var(--accent-color);

}



.service-details .help-box {

  background-color: var(--accent-color);

  color: var(--contrast-color);

  margin-top: 30px;

  padding: 30px 15px;

}



.service-details .help-box .help-icon {

  font-size: 48px;

}



.service-details .help-box h4,

.service-details .help-box a {

  color: var(--contrast-color);

}



.service-details .services-img {

  margin-bottom: 20px;

}



.service-details h3 {

  font-size: 26px;

  font-weight: 700;

}



.service-details p {

  font-size: 15px;

}



.service-details ul {

  list-style: none;

  padding: 0;

  font-size: 18px;

}



.service-details ul li {

  padding: 5px 0;

  display: flex;

  align-items: center;

}



.service-details ul i {

  font-size: 20px;

  margin-right: 8px;

  color: var(--accent-color);

}





.events .card {

  background-color: var(--background-color);

  border: 0;

  padding: 0 30px;

  margin-bottom: 60px;

  position: relative;

}



.events .card-img {

  width: calc(100% + 60px);

  margin-left: -30px;

  overflow: hidden;

  z-index: 9;

  border-radius: 0;

}



.events .card-img img {

  max-width: 100%;

  transition: all 0.3s ease-in-out;

}



.events .card-body {

  z-index: 10;

  background: var(--surface-color);

  border-top: 4px solid var(--surface-color);

  padding: 30px;

  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);

  margin-top: -60px;

  transition: 0.3s;

}



.events .card-title {

  font-weight: 700;

  text-align: center;

  margin-bottom: 20px;

}



.events .card-title a {

  color: var(--default-color);

  transition: 0.3s;

}



.events .card-text {

  color: color-mix(in srgb, var(--default-color), transparent 30%);

}



.events .card:hover img {

  transform: scale(1.1);

}



.events .card:hover .card-body {

  border-color: var(--accent-color);

}



.events .card:hover .card-body .card-title a {

  color: var(--accent-color);

}