body{
    background-color: #CCD0D5;
    padding: 0;
    margin: 0;
}
.footerwalla{
    background-color: #2E4057;
color: #CCD0D5;
}
.fontcolor{
    color: #2E4057 ;
}
.lightcolor{
    color: #CCD0D5;
}
.maincolor{
    background-color: #2E4057 ;
}
.combinecolor{
    background-color: #2E4057 ;
    color: #CCD0D5;
}
.text-justify {
    text-align: justify !important;
}

        /* Extra Small Devices (phones, less than 576px) */
        @media (max-width: 575.98px) {
            .navbar-brand,
            .nav-link {
                font-size: 12px;
            }
            .boxx {
                max-width: 575.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 14px;
            }          }

        /* Small Devices (tablets, 576px and up) */
        @media (min-width: 576px) and (max-width: 767.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 14px;
            }
            .boxx {
                max-width: 767.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 10px;
            }
            .background{
                height: 400px;
            }        
        }

        /* Medium Devices (desktops, 768px and up) */
        @media (min-width: 768px) and (max-width: 991.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 16px;
            }
            .boxx {
                max-width: 991.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 12px;
            }
            .footer {
        padding-top: 380px;
        }
    }

        /* Large Devices (large desktops, 992px and up) */
        @media (min-width: 992px) and (max-width: 1199.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 18px;
            }
            .boxx {
                max-width: 1199.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 14px;
            }
            .footer {
        padding-top: 340px;
        }
        }

        /* Extra Large Devices (extra-large desktops, 1200px and up) */
        @media (min-width: 1200px) and (max-width: 1499.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 20px;
            }
            .boxx {
                max-width: 1499.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 18px;
            }
        }

        /* Extra Large Devices (extra-large desktops, 1200px and up) */
        @media (min-width: 1500px) and (max-width: 1799.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 26px;
            }
            .boxx {
                max-width: 1799.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 24px;
            }
        }

        /* Extra Large Devices (extra-large desktops, 1200px and up) */
        @media (min-width: 1800px) and (max-width: 2099.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 30px;
            }
            .boxx {
                max-width: 2099.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 28px;
            }
        }


        /* Extra Large Devices (extra-large desktops, 1200px and up) */
        @media (min-width: 2100px) and (max-width: 2399.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 32px;
            }
            .boxx {
                max-width: 2399.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 32px;
            }
        }

        /* Extra Large Devices (extra-large desktops, 1200px and up) */
        @media (min-width: 2400px) and (max-width: 2699.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 36px;
            }
            .boxx {
                max-width: 2699.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 36px;
            }
        }

        /* Extra Large Devices (extra-large desktops, 1200px and up) */
        @media (min-width: 2700px) and (max-width: 2999.98px) {

            .navbar-brand,
            .nav-link {
                font-size: 40px;
            }

            .boxx {
                max-width: 2999.98px;
            }

            .igg {
                width: 100%;
            }

            p {
                font-size: 40px;
            }
        }
/* for course */

.container_card {
  position: relative;
  
}

.image {
  display: block;
  
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(46, 64, 87,0.5);
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease;
  transition: .3s ease;
}

.container_card:hover .overlay {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.text {
  color: #ccD0D5; 
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* for background image  */
.background{
	height: 500px;
	background-color:rgba(255, 99, 71, 0.2);
}