@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk&display=swap'); 

        body{
            margin: 0px;
            padding: 0px;
            /* font-family: "Gill Sans Extrabold", sans-serif; */
            font-family: 'Hanken Grotesk', sans-serif;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            
;
        }
        .header-new{
            display: block;
            width: 100%;
            height: 600px;
            margin-top: -10px;
            position: relative;
            /*background-color: #ED9d0b;*/
            background-color: #87CEFA;
            background-repeat: no-repeat;
            background-position: right;
            /*background-image: url('img/bgg.png');*/
        }
        
        
/* specific width size */
        .wd-3{
            width: 30%;
        }

        .wd-5{
            width: 50%;
        }

        .wd-7{
            width: 70%;
        }

        .wd-8{
            width: 80%;
        }
        .main-contents{
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 90%;
            margin: 40 auto;
            /* height: 400px; */
            flex-grow: 5;
            padding: 0px;
            overflow: hidden;
            /* background-color: #f1d5a0; */
        }

.finance-sys{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 300px;
    background-color: #fff;
    box-shadow: 0px 2px 3px 0px #ddd;
    border-radius: 8px;
    overflow:hidden;
    padding: 20px;
    margin: 10px auto;
}

.finance-sys .finance-img{
    width: 400px;
    height: 200px;
    object-fit: cover;
    
    overflow: hidden;
}

.finance-sys .finance-img img{
    width: 100%;
}



.about-us{
    display: grid;
    width: 95%;
    margin: 30px auto;
    /*border: 1px solid red;*/
    grid-template-columns: 1fr 1fr;
}

.about-us .about-text{
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.about-us img{
    width: 60%;
}

.about-title{
    display: flex;
    width: 95%;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0px 3px 5px 0px #eee;
}

.about-text p{
    font-size: 13px;
    line-height: 26px;
    letter-spacing: 2px;
}
        .business_section{
            display: flex;
            gap: 10px;
            width: 98%;
            margin: 0 auto;
            height: 400px;
            flex-grow: 5;
            padding: 5px;
            overflow: hidden;
            border: 1px solid grey;
            /* background-color: #f1d5a0; */
        }
        
        
.our-services{
    width: 90%;
    height: 350px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /*background-color: #eee*/
    margin: 0px auto;
    grid-gap: 20px;
}
.service-types{
    /*border: 1px solid #eee;*/
    overflow: hidden;
    padding: 10px;
    position: relative;
    transition: .3s all ease;
}

.service-types:hover{
    border: thin solid #87CEFA;
    transition: .3s all ease;
}

.contact-area{
    display: grid;
    width: 90%;
    margin: 10px auto;
    grid-template-columns: 1fr 1fr;
    display: grid;
    /*background-color: #87CEFA;*/
    padding: 10px;
    
}

.contact-area .contactBtn{
    color: #fff;
    border-radius: 5px;
    padding: 10px 17px;
    text-transform: uppercase;
    background-color: #000;
    
}

.contact-area form input, textarea{
    outline:none;
    border: 1px solid #000  !important;
}

.contact-area .contact-form{
    width: 100%;
}

.contactimg{
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot{
    width: 60px;
    height: 60px;
    border-radius: 100px;
    /*background-color: #87CEFA ;*/
    border: thin solid #87CEFA;
    transition: .3s all ease;
    position: absolute;
    right: 10;
}

.service-types .service-img{
    overflow: hidden;
    object-fit: cover;
}

.service-img img{
    width: 50%;
}

.service-types p{
    color: #333;
}
.service-types a{
    padding: 5px 8px;
    text-decoration: none;
    border: 1px solid #87CEFA;
    border-radius: 4px;
    transition: all ease .3s ;
}

.service-types a:hover{
    background-color: #87CEFA;
    transition: all ease .3s ;
}


.blog-section{
    
}










        .learning_section{
            display: flex;
            gap: 10px;
            width: 98%;
            margin: 0 auto;
            height: 600px;
            flex-grow: 5;
            padding: 5px;
            overflow: hidden;
            /* border: 1px solid grey; */
            /* background-color: #f1d5a0; */
        }

        .learning_section ul {
            margin-left: -30px;
            list-style-type: none;
            /* border: 1px solid red; */
        }

        .learning_section ul li{
            padding: 10px;
        }

        .learning_section ul li a{
            color: #181264;
            padding: 2px;
            font-weight: 600;
            text-decoration: none;
            /* background-color: #888; */
        }

        .learning_section .bootcamps{
            overflow: hidden;
            /* border: 1px solid green; */
        }

        .learning_section .bootcamps .camp-card{
            width: 50%;
            height: 460px;
            overflow: hidden;
            /* border: 1px solid pink; */
        }

        .learning_section .bootcamps .camp-card .campImage{
            width: 100%;
            height: 200px;
            overflow: hidden;
            /* border: 1px solid green; */

        }
        .learning_section .bootcamps .camp-card .campImage img{
            width: 100%;
        }

        .learning_section .bootcamps .camp-card .camp-card-body{
            margin: 10px auto;
            width: 98%;
        }

        .learning_section .bootcamps .camp-card .camp-card-body h1{
            font-size: 24px;
            margin-bottom: -10px;
        }

        .learning_section .bootcamps .camp-card .camp-card-body p{
            font-size: 17px;
            line-height: 25px;
            letter-spacing: 2px;
        }

        .learning_section .bootcamps .camp-card .camp-card-footer{
            margin: 10px auto;
            width: 98%;
            padding: 16px;
            border-top: 1px solid #ED9d0b;
        }

        .learning_section .bootcamps .camp-card .camp-card-footer button{
            color: #000;
            font-weight: 600;
            padding: 10px 14px;
            border-radius: 4px;
            border: none;
            margin-left: -16px;
            text-decoration: none;
            background-color: #ED9d0b;
        }



        .business{
            width: 40%;
            height: 500px;
            overflow: hidden;
            border: 1px solid grey;
        }

        .business .wrap-image{
            width: 80%;
            height: 300px;
            display: block;
            position: relative;
            border: 2px solid #ED9d0b;
            background-color: #ecd8b2;
        }
        .business img{
            width: 100%;
            height: 80%;
            left: 15%;
            top: 20%;
            position: absolute;
        }


        .breadcrumb {
            
            display: flex;
            width: 90%;
            align-items: center;
            margin: 40 auto;
            border: 1px solid;
          }
          
          .breadcrumb img {
            width: 70%;
            height: 400px;
            margin-right: 20px;
          }
          
          .breadcrumb p {
            font-size: 14px;
            margin: 0;
            color: #999;
          }
          
          .breadcrumb h3 {
            margin: 0;
            font-size: 16px;
          }

          /* ccontact us form */


          .contact-us{
            /*margin-top: 70px;*/
            margin: 40px auto;
            border:1px solid red;
            display: flex;
            width: 95%;
            padding: 10px;
          }
          
          .contact-us .contact-image{
              display: block;
              width: 70%;
              height: 400px;
              box-shadow: 0px 2px 4px 0px #eee;
          }
          .contact-us form {
          width: 50%;
          margin: 0 auto;
          text-align: left;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"], textarea {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #000;
  border-radius: 4px;
  font-size: 16px;
  padding: 12px 20px;
  margin-bottom: 20px;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}


        .lead{
            display: flex;
            flex-direction: column;
            width: 50%;
            margin: 0 auto;
            overflow: hidden;
        }

        .lead h1{
            font-size: 25px;
            margin-bottom: -10px;
        }

        .lead p{
            font-size: 15px;
            letter-spacing: 2px;
            line-height: 29px;
        }

        .topnav{
            display: flex;
            width: 85%;
            height: 70px;
            margin: 10px auto;
            align-items: center;
            justify-content: space-between;
            /* border: #f1d5a0 1px solid; */
            /*background-color: #ED9d0b;*/
            background-color: #87CEFA;
        }

        .topnav .logo a{
            /*color: #ecd8b2;*/
            color:#000;
            font-weight: 700;
            text-decoration: none;
        }

        .topnav .nav-links ul{
            display: flex;
            list-style: none;
        }

        .topnav .nav-links ul li {
            padding: 10px;
        }

        .topnav .nav-links ul li a{
            text-align: center;
            color: #181264;
            text-decoration: none;
            font-weight: 600;
        }

        .topnav .nav-links ul li a.active{
            color: #ecd8b2;
            padding-bottom: 10px;
            border-bottom: 2px solid white;
        }

        .topnav .nav-links ul li a.contact{
            color: #181264;
            padding: 10px 13px;
            border-radius: 4px;
            transition: all ease-in .3s ;
            border: 1px solid #181264;
        }
        .topnav .nav-links ul li a.contact:hover{
            transition: all ease-in .3s;
            background-color: #e5e1db;
        }

        .topnav .nav-links .dropmenu{
            display: none;
            position: absolute;
            width: 16%;
            left: 60%;
            top: 10%;
            height: 50px;
            border-radius: 6px;
            padding: 10px;
            box-shadow: 0px 2px 3px grey;
            background-color: white;
        }

        .topnav .toggleMenumini{
            display: none;
        }

        /* mini topnav styles starts here */
        .mobile-nav{
            display: none;
            width: 50%;
            height: 100vh;
            background-color: #000;
            position: fixed;
            top: 0;
            padding: 18px;
            z-index: 999;
        }

        .mobile-nav .logo{
            display: flex;
            justify-content: space-between;
            padding: 16px 18px;
            background-color: #1a1919;
        }

        .mobile-nav .logo a{
            color: #ED9d0b;
            font-size: 19px;
            text-decoration: none;
        }

        .mobile-nav .logo i{
            color: #fff;
            font-size: 28px;
        }

        .mobile-nav ul{
            list-style: none;

        }

        .mobile-nav ul li{
            padding: 16px;
            transition: all ease .2s;
        }

        .mobile-nav ul li a{
            color: #fff;
            text-decoration: none;
        }

        /* mini topnav styles ends here */


        .header-new .contents{
            display: grid;
            grid-gap: 10px;
            position: absolute;
            width: 85%;
            height: 200px;
            /* margin: 10px auto; */
            left: 6%;
            top: 40%;
            /* border: 1px solid #ecd8b2; */
            grid-template-columns: 1fr 1fr;
        }

        .contents .title{
            width: 100%;
            padding: 20px;
            /* background-color: white; */
        }

        .contents .title h1{
            /* font-weight: normal; */
            font-size: 50px;
        }

        .contents .title p{
            color: #484657;
            margin-top: -10px;
            font-size: 30px;
        }

        .contents .design{
            position: relative;
            width: 100%;
            height: 600px;
            overflow: hidden;
            text-align: center;
        }

        .contents .design .display_image{
            width: 300px;
            position: absolute;
            left: 20%;
            padding: 10p;
            height: 300px;
            overflow: hidden;
            border: 1px solid grey;
            object-fit: cover;
            border-radius: 200px;
        }

        .contents .design .display_image img{
            width: 100%;
            height: 100%;
        }

        /* hero style */
        .hero{
            display: block;
            width: 100%;
            height: 500px;
            background-color: #eee;
        }

        .hero .title{
            margin: 30px auto;
            width: 70%;
            padding: 10px;
            text-align: center;
            font-size: 40px;
            letter-spacing: 2px;
        }

        .hero .text{
            width: 70%;
            display: flex;
            font-size: 16px;
            line-height: 28px;
            letter-spacing: 2px;
            margin: 10px auto;
            align-items: center;
            justify-content: center;
        }

        .hero a{
            width: 30%;
            color: #fff;
            display: block;
            margin: 20px auto;
            border-radius: 15px;
            text-align: center;
            padding: 14px 17px;
            text-decoration: none;
            background-color: #000;
        }

        .four-angles{
            display: block;
            width: 100%;
            height: 900px;
            position: relative;
            background-color: #fff;
        }

        .four-angles .shapes{
            width: 200px;
            height: 200px;
            top: 40%;
            left: 10%;
            border-radius: 100%;
            position: absolute;
            background-color: #c1a95d;
        }

        .four-angles .shapes-2{
            width: 200px;
            height: 200px;
            top: 10%;
            right: 13%;
            border-radius: 100%;
            position: absolute;
            background-color: #8e8158;
        }

        .four-angles .head{
            width:50%;
            font-size: 26px;
            font-weight: 600;
            text-transform: uppercase;
            text-align: center;
            margin: 30px auto;
        }

        .four-angles .angels-area{
            display: grid;
            width: 70%;
            height: 350px;
            grid-gap: 20px;
            margin: 10px auto;

            background-color: #ffff;
            grid-template-columns: 1fr 1fr;
        }

        .angels-area .angels{
            width: 80%;
            height: 300px;
            padding: 10px;
            border-top-right-radius: 30px;
            border-bottom-right-radius: 30px;
            position: relative;
            border: 2px solid #181264;
            background-color: #ccc;
            box-sizing: border-box;
            /* box-shadow: 0px 3px 6px 0px #ddd; */
        }

        .angels-area .angels-left{
            width: 80%;
            height: 300px;
            padding: 10px;
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
            position: relative;
            border: 2px solid #181264;
            background-color: #ccc;
            box-sizing: border-box;
            /* box-shadow: 0px 3px 6px 0px #ddd; */
        }

        .angels-area .angels h2{
            color: #fff;
        }

        .angels-area .angels .footer{
            position: absolute;
            bottom: 8%;
        }

        .angels-area .angels .footer a{
            color: #fff;
            padding: 10px 13px;
            background-color: #000;
            text-decoration: none;
        }


        /* carousel styling */
        #carousel {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


        /* form modal */
        /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

.modal form{
    margin: 0 auto;
}
.modal form input{
    padding: 10px 14px;
    width: 100%;
    outline: none;
    border: 1px solid #888888;
}

.modal form select{
    padding: 10px 14px;
    width: 100%;
    outline: none;
    border: 1px solid #888888;
}

.modal form select option{
    padding: 10px 14px;
    width: 100%;
    outline: none;
    border: 1px solid #888888;
}

.modal form textarea{
    padding: 10px 14px;
    width: 100%;
    outline: none;
    border: 1px solid #888888;
}

.modal form label{
    display: block;
    margin-top: 5px;
}

.modal form button{
    border: 1px solid #888888;
    cursor: pointer;
    font-weight: 600;
    padding: 10px 16px;
    margin-top: 10px;
    text-transform: uppercase;
    background-color: #888888;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.footer-sec{
    width: 100%;
    color: #eee;
    height: 350px;
    overflow: hidden;
    position: relative;
    /*background-color: #c1a95d;*/
    background-color:#000;
}

.footer-sec .footer-bottom{
    display: flex;
    width: 90%;
    margin: 3px auto;
    height: 50px;
    border-top: 1px solid #eee;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0%;
    left: 4%;
    right: auto;
    /*background-color: #eee;*/
}

.footer-center{
    /*background-color: #fff;*/
    width: 80%;
    margin: 0px auto;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}

.footer-center .center-left{
    
}

.footer-center .center-left ul {
    list-style-type:none ;
}

.footer-center .center-left ul li{
    padding: 10px;
    transition: all ease .3s;
}

.footer-center .center-left ul li a{
    color: #eee;
    text-decoration: none;
    transition: all ease .3s;
    
}


.footer-center .center-left ul li:hover{
    
    transition: all ease .3s;
    margin-left: -30px;
    /*background-color: #87CEFA;*/
    
}

.footer-center .center-left ul li a:hover{
    color:#87CEFA;
    transition: all ease .3s;
}

.footer-center div .social-media-links{
    margin: 50px auto;
    padding: 20px;
    width: 90%;
    text-align: center;
}

.footer-center div .social-media-links .icofont{
    
}
.footer-center div .social-media-links ul{
    display: flex;
    list-style-type: none;
}

.footer-center div .social-media-links ul li{
    padding: 7px;
    background-color: #DDD;
    border-radius: 100%;
    margin: 10px;
    transition: all ease .3s;
}

.footer-center div .social-media-links ul li:hover{
    background-color: #000;
    border:1px solid #eee;
    color: #eee;
    transition: all ease .3s;
}

.footer-center div .social-media-links ul li a{
    color: #000;
    font-size: 18px;
    text-decoration: none;
}

.footer-center div .social-media-links ul li a:hover{
    color: #eee;
}