:root{
    --main-color: #60418b;
    --secondary-color: #F9A121;
}
.path-pad{
    padding-bottom: 100px;
}
h3{
    font-size: 30px;
    font-weight: 600;
}
h3 span{
    color: var(--main-color);
}




.hero-sec {
    padding-top: 170px;
}
.hero-sec p{
    font-size: 18px;
}
.hero-sec .hero-title {
    font-weight: 600;
    line-height: 60px;
}
.hero-sec .hero-title span{
    color: #60418b;
}
.hero-sec .hero-img{
    margin-top: 15px;
}
.hero-sec .hero-img img {
    border-radius: 20px;
}
.hero-sec .bttns {
    display: flex;
    gap: 20px;
    margin: 15px 0;
}
.hero-sec .bttns .brochure {
    border: 1px solid #000;
    padding: 7px 20px;
    border-radius: 99px;
}
.hero-sec .bttns .guidance{
    background-color: var(--main-color);
    padding: 7px 20px;
    border-radius: 99px;
}
.hero-sec .bttns .guidance a{
    color: #ffff;
}
.hero-sec .bttns .guidance a i {
    font-size: 14px;
    transition: 0.3s;
}
.hero-sec .bttns .guidance a:hover i {
    font-size: 14px;
    transform: rotate(-45deg);
}



/* ============================abt-sec============================ */

.abt-sec{
    padding: 100px 0;
}
.abt-sec .abt-cnt{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.abt-sec .abt-cnt h3{
    font-size: 30px;
}
.abt-sec .abt-cnt h3 span{
    color: var(--main-color);
}

/* ============================whocan============================ */

.whocan{
    padding: 100px 0;
}
.seo-learning-Path .number{
    height: 96px;
}
.scope-dm {
    padding-bottom: 100px;
    padding-top: 20px;
}

/* .dm-technology-icons {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    border-radius: 20px;
    justify-items: center;
} */

.pad-10 {
    padding: 15px;
}



/* graphic-designing=====================================================================================================================
=========================================================================================================================================
========================================================================================================================================= */


.custom-pad-sec{
    padding: 100px 0;
}
.gd-technology-icons {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    border-radius: 20px;
    justify-items: center;
    border: 1px solid #c4c4c4;
}
.gd-seo-faq li img {
    width: 35px;
}
.whocan .who-can-img img {
    width: 100%;
    border-radius: 10px;
}
.whocan .whocan-cnt p{
    margin: 0;
}
.whocan .whocan-cnt {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* uiux-designing =======================================================================================================================
=========================================================================================================================================
========================================================================================================================================= */

.bestfor-uiux .points-col {
    padding: 25px;
}
.bestfor-uiux .points-col .col-head h3 {
    font-size: 20px;
}

.uiux-seo-tools{
    padding: 100px 0 0 0;
}
.ui-ux-tecnology-icons {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    border-radius: 20px;
    justify-items: center;
    border: 1px solid #c4c4c4;
}
.uiux-path ul li{
    margin-left: 18px;
    list-style: disc;
}
.uiux-path .info-section {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.abt-sec img{
    width: 100%;
    border-radius: 20px;
}
/* =======================mg===================== */

.ui-ux-tecnology-icons {
    grid-template-columns: repeat(9, 1fr);
}
@media (max-width: 1400px){
    .hero-sec .hero-title {
        font-size: 38px;
    }
    .motion-abt-cnt{
        font-size: 28px !important;
    }
}
@media (max-width: 996px){
    h3 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .hero-sec {
        padding-top: 125px;
    }
    .hero-sec .bttns {
        gap: 10px;
    }
    .hero-sec .hero-title {
        line-height: normal;
        font-size: 33px;
    }
    .hero-sec .hero-title br{
        display: none;
    }
    .hero-sec p {
        margin: 0;
    }
    .hero-sec .bttns .guidance a {
        font-size: 14px;
    }
    .hero-img{
        height: 200px;
    }
    .hero-sec .hero-img img {
        border-radius: 15px;
        height: 100%;
        object-fit: cover;
    }
    .abt-sec {
        padding: 50px 0;
    }
    .abt-sec .abt-cnt h3 {
        font-size: 24px;
    }
    .bestfor h3 br{
        display: none;
    }
    .bestfor h3 {
        margin-bottom: 40px;
        font-size: 22px;
        text-align: center;
    }
    .points-icon img{
        width: 35px;
    }
    .bestfor .points-col .col-head h3 {
        font-size: 18px;
        text-align: left;
        margin-top: 15px;
    }
    .bestfor .points-col {
        padding: 25px;
        margin-bottom: 15px;
    }
    .whocan .who-can-img{
        margin-bottom: 30px;
    }

    .whocan {
        padding: 50px 0;
    }


    .learning-Path h5 {
        margin-bottom: 30px;
        text-align: center;
    }
    .number img {
        width: 40px;
    }

    .placements .morebtn {
        margin-top: 55px;
    }

    .scope-dm {
        padding-bottom: 50px;
    }

    .review-heading h4 {
        font-size: 30px;
        margin-bottom: 1rem;
    }

    
    .dm-technology-icons {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .faq-section {
        padding: 50px 0 60px 0px;
    }


    .gd-technology-icons {
        grid-template-columns: repeat(6, 1fr);
    }



    .ui-ux-tecnology-icons {
        grid-template-columns: repeat(5, 1fr)
    }
    .uiux-path .info-section {
        grid-template-columns: repeat(2, 1fr);
    }

    .uiux-seo-tools {
        padding: 50px 0 0 0;
    }



    .ui-ux-tecnology-icons {
        grid-template-columns: repeat(5, 1fr);
    }
    .abt-sec .abt-img{
        margin-bottom: 20px;
    }
}


@media (max-width: 568px){
    .dm-technology-icons {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .gd-technology-icons{
        grid-template-columns: repeat(4, 1fr);
    }

    .ui-ux-tecnology-icons {
        grid-template-columns: repeat(4, 1fr)
    }
    .custom-pad-sec {
        padding: 50px 0;
    }
    .uiux-path .info-section {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    .ui-ux-tecnology-icons {
        grid-template-columns: repeat(4, 1fr);
    }
}