*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ***************************************************Header Starts************************************************************************ */
.main-container{
    width : 100%;
    padding-top: 0;
    background: #000;
    background-image: 
    url('./Assets/Group\ 10145.png'), 
    url('./Assets/Group\ 10143.png'),
    url('./Assets/Group\ 4.png'),
    url('./Assets/Group\ 4.png'),
    url('./Assets/Group\ 4.png'),
    url('./Assets/Group\ 4.png'),
    url('./Assets/Group\ 10145.png'),
    url('./Assets/Group\ 10145.png'),
    url('./Assets/Group\ 10145.png'),
    url('./Assets/Group\ 4.png'),
    url('./Assets/Group\ 4.png'),
    url('./Assets/Rectangle\ 7.png'),
    url('./Assets/Ellipse\ 9.png'),
    url('./Assets/Group\ 10145.png'),
    url('./Assets/Rectangle\ 7.png'),
    url('./Assets/Ellipse\ 9.png'),
    url('./Assets/Group\ 10143.png');


/* Multiple background sizes */
    background-size: 
        600px 600px,
        600px 600px,
        1200px 1200px,
        1200px 1200px,
        1200px 1200px,
        1200px 1200px,
        800px 800px,
        800px 800px,
        800px 800px,
        1500px 1100px,
        1500px 1100px,
        1200px 1000px,
        1200px 1000px,
        800px 800px,
        1200px 1000px,
        1200px 1000px,
        800px 800px;


    /* Multiple background repeats */
    background-repeat: 
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;

    /* Multiple background positions */
    background-position: 
        calc(50% - 600px) 300px,         
        calc(50% + 600px) 116.66px,
        center 450px,
        center 1350px,
        center 3100px,
        center 3100px,
        calc(50% - 400px) 4600px,
        calc(50%) 4600px,
        calc(50% + 400px) 4600px,
        calc(50% - 250px) 5200px,
        calc(50% + 300px) 5200px,
        calc(50% - 200px) 5850px,
        calc(50% + 250px) 5850px,
        calc(50% + 700px) 6300px,
        calc(50% - 200px) 6550px,
        calc(50% + 250px) 6550px,
        calc(50% - 800px) 6800px;

}

.Home{
    width: 1196px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 50px; */
    margin: auto;
    overflow: hidden;
}


.technolkar-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1196px;
    height: 56px;
    border-radius: 50px;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background-color: #ffffff1a;
    position: sticky;
    top: 40px;
    z-index: 10;
    padding: 10px 0;
    margin: auto;
}
.technolkar-logo-a{
    text-decoration: none;
}
.technolkar-logo-a:hover{
    cursor: pointer;
}

.technolkar-logo{
    width: 32px;
    height: 36px;
    margin: 0 16px;
}

.nav-bar-out,
.nav-icon-div{
    display: none;
}

.nav-bar-out{
    width: 100%;
    /* height: ; */
    text-align: left;
    /* margin: 0 auto; */
    /* background: #fff; */
    /* padding: 50px 0; */
    /* box-shadow: 0px 5px 0px #dedede; */
}
.nav-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 60%;
    z-index: 99;
    background-color: rgba(255, 255, 255, 0.178);
    margin: 0;
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px) !important;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 32px 16px;
}
.nav-sidebar li {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
}
.nav-sidebar li a {
    text-decoration: none;
    font-family: Inter;
    color: var(--color-white);
    font-size: 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 8px 16px;
    margin: 0;
}
.cross-icon{
    width: 24px;
    height: 24px;
}
.nav-sidebar li .cross-icon-a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}
.nav-sidebar li img{
    width: 24px;
    height: 24px;
}
.connect-button{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.nav-bar-container ul{
    /* width: 100%; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    list-style: none;  
}

.nav-bar-container ul li a {
    display: block;
    padding: var(--padding-3xs);
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: var(--font-size-xl);
    margin: 0 10px;
    font-family: inter;
    transition: all .5s;
}

.nav-bar-container ul li a,
.nav-bar-container ul li a:after,
.nav-bar-container ul li a:before {
    transition: all .5s;    
}
.nav-bar-container ul li a:hover {
    background-image: linear-gradient(99.57deg, #C471F7 16.83%, rgba(235, 169, 71, 0.66) 96.78%, rgba(188, 180, 234, 0.25) 110.94%, rgba(106, 117, 213, 0.475) 126.77%);
    background-clip: text;
    color: transparent;
    transition: all .5s;
}

.nav-bar-container.stroke ul li a,
.nav-bar-container.fill ul li a {
    position: relative;
}
.nav-bar-container.stroke ul li a:after,
.nav-bar-container.fill ul li a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: linear-gradient(99.57deg, #C471F7 16.83%, rgba(235, 169, 71, 0.66) 96.78%, rgba(188, 180, 234, 0.25) 110.94%, rgba(106, 117, 213, 0.475) 126.77%);
    height: 1px;
}
.nav-bar-container.stroke ul li a:hover:after {
    width: 100%;
}

.nav-bar-container.fill ul li a {
    transition: all 2s;
}

.nav-bar-container.fill ul li a:after {
    text-align: left;
    content: '.';
    margin: 0;
    opacity: 0;
}
.nav-bar-container.fill ul li a:hover {
    color: #fff;
    z-index: 1;
}
.nav-bar-container.fill ul li a:hover:after {
    z-index: -10;
    animation: fill 1s forwards;
    -webkit-animation: fill 1s forwards;
    -moz-animation: fill 1s forwards;
    opacity: 1;
}

.nav-bar-container ul li a.active{
    background-image: linear-gradient(99.57deg, #C471F7 16.83%, rgba(235, 169, 71, 0.66) 96.78%, rgba(188, 180, 234, 0.25) 110.94%, rgba(106, 117, 213, 0.475) 126.77%);
    background-clip: text;
    color: transparent;
    transition: all .5s;
    font-weight: 600;
}
.header-button-a{
    display: flex;
    align-items: center;
    justify-content: center !important;
}
.lets-connect{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
}

.lets-connect button {
    background: 
    linear-gradient(#404040, #3d3d3d) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
    height: 36px;
    color: var(--color-gray-100);
    padding: 4px 20px;
    border: 2px solid transparent;
    border-radius: 50px;
    display: inline-block;
    font-size: var(--font-size-xl);
    transition: all .25s ease;
}

.lets-connect span{
    color: white;
    font-size: var(--body-med-size);
    font-family: Inter;
}

.header-button-a{
    text-decoration: none;  
}

.lets-connect button:hover{
    cursor: pointer;
    transform: scale(.95);
    transition: all .25s ease;
}

/* **********************************************************************************************Header Ends*********************************************************************************************** */


/* **********************************************************************************************Home Starts************************************************************************************************ */

.home-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 80px;
    padding: 100px 0 0 0;
    margin-top: 50px;
}

.main-heading{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 36px;
}

.main-heading h1{
    font-family: Urbanist;
    font-size: 76px;
    font-weight: 600;
    background: linear-gradient(99.57deg, #C471F7 16.83%, rgba(235, 169, 71, 0.66) 96.78%, rgba(188, 180, 234, 0.25) 110.94%, rgba(106, 117, 213, 0.475) 126.77%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-align: center;
    width: 810px;
}

.community-button-a{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .25s ease;
}

.community-button button{
    width: 282px;
    height: 54px;
    padding: 12px 36px 12px 36px;
    gap: 10px;
    border-radius: 50px;
    border: 1.5px;
    font-family: Poppins;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    color: #FFFFFF;
    background: linear-gradient(180deg, #565ABA 0%, #C200C6 100%);
}

.community-button-a:hover{
    cursor: pointer;
    transform: scale(.95);
    transition: all .25s ease;
}
.community-button button:hover{
    cursor: pointer;
}


.student-block{
    width: 397px;
    height: 72px;
    padding: 12px 16px;
    gap: 2px;
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: 
    linear-gradient(#1f1523, #221728) padding-box,
    linear-gradient(99.57deg, rgba(196, 113, 247, 0.4) 16.83%, rgba(235, 169, 71, 0.264) 96.78%, rgba(188, 180, 234, 0.1) 110.94%, rgba(106, 117, 213, 0.19) 126.77%) border-box;
    border: 1px solid transparent;
    border-radius: 50px;
}

.student-container{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap: 24px;
}

.student-container p{
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 24.3px;
    text-align: center;
    color: #FFFFFF;
    
}

.student-tabs{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.tab-1,
.tab-2,
.tab-3{
    width: 238px;
    height: 100px;
    padding: 16px 24px 16px 24px;
    gap: 8px;
    border-radius: 12px;
    border: 1px;
    background: 
    linear-gradient(#221927, #221728) padding-box,
    linear-gradient(99.57deg, rgba(196, 113, 247, 0.4) 16.83%, rgba(235, 169, 71, 0.264) 96.78%, rgba(188, 180, 234, 0.1) 110.94%, rgba(106, 117, 213, 0.19) 126.77%) border-box;
    border: 1px solid transparent;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tab-number{
    font-family: Inter;
    font-size: 32px;
    font-weight: 600;
    line-height: 35.2px;
    text-align: center;
    color: white;
}
.tab-text{
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24.3px;
    text-align: center;
    color: rgba(255, 255, 255, 0.548);
}

.video-container{
    width: 100%;
    aspect-ratio: 16 / 9; 
    margin: 0 auto;
    -webkit-backdrop-filter: blur(10px);
    background-color: #ffffff1a;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.video-container iframe {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 16px;
}

/* **********************************************************************************************Home Ends************************************************************************************************ */

/* **********************************************************************************************Product Starts************************************************************************************************ */

.Products{
    padding: 150px 0 0 0;
    width: 1196px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
    overflow: hidden;

}
.heading{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.heading h1{
    font-family: Audiowide;
    font-size: 48px;
    font-weight: 400;
    line-height: 61.2px;
    text-align: center;
    color: #FFFFFF;
}
.line{
    width: 150px;
    height: 10px;
    background: linear-gradient(180deg, #565ABA 0%, #C200C6 100%);
    border-radius: 50px;
}
.products-container{
    display: flex;
    flex-direction: column;
    gap: 36px;
    width: 100%;
    border-radius: 24px;
    
}
.product-card1,
.product-card2,
.product-card3{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 24px;
    background-color: #ffffff1a;
    border-radius: 24px;
}
.product-image{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-image img{
    width: 100%;
    height: 100%;
    border-radius: 16px 0 0 16px;
}
.product-des1{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 62px 80px;
    gap: 36px;
    background-image: url(./Assets/Frame\ 15.png);
    background-repeat: no-repeat;
    background-size: 574px 312px;
    background-position: cover;
    border-radius: 0 16px 16px 0;
}
.product-des2{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 62px 80px;
    gap: 36px;
    background-image: url(./Assets/Frame\ 16.png);
    background-repeat: no-repeat;
    background-size: 574px 312px;
    background-position: cover;
    border-radius: 0 16px 16px 0;
}
.product-des3{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    padding: 62px 80px;
    gap: 36px;
    background-image: url(./Assets/Frame\ 17.png);
    background-repeat: no-repeat;
    background-size: 574px 312px;
    background-position: cover;
    border-radius: 0 16px 16px 0;
}
.product-des-detail{
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 8px;
}
.product-des-detail h1{
    font-family: Inter;
    font-size: 32px;
    font-weight: 600;
    line-height: 35.2px;
    text-align: left;
    color: #FFFFFF;
}
.product-des-detail p{
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 24.3px;
    text-align: left;
    color: rgba(255, 255, 255, 0.386);
}
.button-container{
    display: flex;
    align-items: center;
    justify-content: left;
    background-color: transparent;
}

.button-container a{
    background-color: rgba(255, 255, 255, 0.115);
    border: 1px solid white;
    padding: 12px 20px;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

.button-div{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    gap: 8px;
}
.button-div h1{
    font-family: Inter;
    font-size: 20px;
    font-weight: 600;
    line-height: 24.2px;
    text-align: left;
    color: white;
}
.button-div img{
    width: 24px;
    height: 24px;
}

.button-container a:hover{
    cursor: pointer;
    transform: scale(0.95);
    transition: all 0.3s ease-in-out;
    background-color: #ffffff62;
}

/* **********************************************************************************************Product Ends************************************************************************************************ */


/* **********************************************************************************************Services Starts************************************************************************************************ */

.Services{
    width: 1196px;
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 100px;
    padding: 150px 0 0 0;
    overflow: hidden;


}
.service-container{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.service-card1,
.service-card2,
.service-card3,
.service-card4,
.service-card5,
.service-card6{
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #ffffff1a;
    border-radius: 16px;
    gap: 16px;
    border: 1px solid #ffffff1e;
}
.service-image{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.service-image img{
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.service-des{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
}
.service-name{
    display: flex;
    justify-content: center;
    align-items: center;
}
.service-name h1{
    font-family: Urbanist;
    font-size: 24px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    color: #FFFFFF;
}
.service-link{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: 
    linear-gradient(#404040, #3d3d3d) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
    color: var(--color-gray-100);
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 8px;
}
.service-link img{
    width: 10px;
    height: 10px;
}
.service-a{
    transition: all 0.2s ease-in-out;
}
.service-a:hover{
    transform: rotate(45deg) scale(.95);
    transition: all 0.2s ease-in-out;
}
.service-a:hover .service-link{
    background: 
    linear-gradient(#626262, #626262) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
    color: var(--color-gray-100);
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 8px;
}


/* **********************************************************************************************Services Ends************************************************************************************************ */


/* **********************************************************************************************Youtube Starts************************************************************************************************ */
.Youtube{
    width: 1196px;
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 100px;
    padding: 150px 0 0 0;
    overflow: hidden;

}

.youtube-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}
.youtube-subcon1,
.youtube-subcon2{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 36px;
}
.youtbe-cont-heading{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.youtbe-cont-heading h1{
    width: 100%;
    font-family: Inter;
    font-size: 32px;
    font-weight: 600;
    line-height: 35.2px;
    text-align: left;
    color: white;
}
.youtube-video-cont{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}
.yotube-video1{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48%;
}
.yotube-video1 img{
    width: 100%;
    border-radius: 24px;
}
.youtube-video1-des{
    display: flex;
    flex-direction: column;
    width: 48%;
    gap: 40px;
    box-sizing: border-box;
}
.video1-name-cont{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.video1-name{
    display: flex;
    justify-content: center;
    align-items: center;
}
.video1-name h1{
    font-family: Inter;
    font-size: 24px;
    font-weight: 600;
    line-height: 26.4px;
    text-align: left;
    color: white;
}
.video1-channel{
    display: flex;
    flex-direction: column;
    justify-content: left;
    width: 100%;
    gap: 8px;
}
.video1-channel p{
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 24.3px;
    text-align: left;
    color: rgba(255, 255, 255, 0.386);
}
.video1-channel-views{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.watch-button-co{
    display: flex;
    justify-content: left;
    align-items: center;
}

.watch-button-co p{
    background: 
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    color: white;
    padding: 12px 20px;
    border: 2px solid transparent;
    border-radius: 50px;
    transition: all .25s ease;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 600;
    line-height: 21.09px;
}

.watch-button-a{
    text-decoration: none; 
    display: flex;
    justify-content: left;
    align-items: center; 
}

.watch-button-co p:hover{
    cursor: pointer;
    transform: scale(.95);
    transition: all .25s ease;
    background: 
    linear-gradient(#303030, #2d2d2d) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
}

.youtube-videos-cont{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.youtube-videos-cont a{
    text-decoration: none;
}
.youtube-videos-cont a:hover .videos-div-1{
    transform: scale(.95);
    transition: all .3s ease;
}
.videos-div-1{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 385px;
    border-radius: 24px;
    background-color: #ffffff2c;
    backdrop-filter: blur(5px);
    transition: all .3s ease;
    height: 100%s;
}
.videos-1-img{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 24px;
}
.videos-1-img img{
    width: 100%;
    border-radius: 24px;
}
.videos-1-des{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px 16px 16px 16px ;
    gap: 10px;
}
.channel-logo-div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.channel-logo{
    width: 40px;
    height: 43px;
}
.channel-logo img{
    width: 100%;
    height: 100%;
}
.video-name{
    display: flex;
    justify-content: center;
    /* align-items: center; */
}
.video-name p{
    font-family: Inter; 
    width: 288px;
    font-size: 18px;
    font-weight: 500;
    line-height: 24.3px;
    text-align: left;
    color: white;
    text-decoration: none;
}
.videos-1-views{
    display: flex;
    flex-direction: row;
    align-items: left;
    width: 100%;
    padding-left: 66px;
    gap: 16px;
}
.videos-1-views p{
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.6px;
    text-align: left;
    color: white;
    text-decoration: none;
}
.youtube-subcon3{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

.youtube-subcon3 p{
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 24.3px;
    color: rgba(255, 255, 255, 0.311);
}
.youtube-subcon3 a{
    text-decoration: none;
}

.sub-button-a{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sub-button-co{
    text-decoration: none; 
    display: flex;
    justify-content: space-between;
    align-items: center; 
    gap: 8px;
    background: 
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
    height: 42px;
    color: white;
    padding: 12px 20px;
    border: 2px solid transparent;
    border-radius: 50px;
    transition: all .25s ease;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 600;
    line-height: 21.09px;
}
.sub-img{
    width: 25px;
    height: 25px;
}
.sub-img img{
    width: 100%;
    height: 100%;
}
.sub-subscribe{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sub-subscribe p{
    font-family: Roboto;
    font-size: 18px;
    font-weight: 600;
    line-height: 21.09px;
    text-align: left;
    color: white;
}

.sub-button-co:hover{
    cursor: pointer;
    transform: scale(.95);
    transition: all .25s ease;
    background: 
    linear-gradient(#303030, #2d2d2d) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
}

/****************************************************************************************************Youtube Ends************************************************************************************************* */

/****************************************************************************************************Teams Start************************************************************************************************* */
.Teams{
    width: 1196px;
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 100px;
    padding: 150px 0 0 0;
    overflow: hidden;
}
.card_container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    gap: 24px;
}
.card1-container,
.card2-container,
.card3-container,
.card4-container,
.card5-container,
.card6-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 100%;
}
.card1,
.card2,
.card3,
.card4,
.card5,
.card6{
    width: 100%;
    height: 100%;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #ffffff1e;
    background-color: #ffffff1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
    position: relative;
    overflow: hidden;
}
.card_image{
    width: 330px;
    height: 350px;
    border-radius: 12px;
}
.card_image img{
    width: 100%;
    height: 100%;
    border-radius: 12px;
}
.card_bio{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    gap: 18px;
}

.card_bio h1{
    font-family: Inter;
    font-size: 24px;
    font-weight: 600;
    line-height: 22px;
    text-align: left;
    color: white;
}

.card_bio p{
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 16.2px;
    text-align: left;
    background: linear-gradient(99.57deg, #C471F7 16.83%, rgba(235, 169, 71, 0.66) 66.78%, rgba(188, 180, 234, 0.25) 80.94%, rgba(106, 117, 213, 0.475) 96.77%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.hidden-box{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -110%;
    background-color: #ffffff1e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(5px)!important;
    backdrop-filter: blur(5px)!important;
    transition: .5s ease-out;
    gap: 16px;
  }
  
  .card1:hover  .hidden-box,
  .card2:hover  .hidden-box,
  .card3:hover  .hidden-box,
  .card4:hover  .hidden-box,
  .card5:hover  .hidden-box,
  .card6:hover  .hidden-box{
    bottom: 0;
  }
  
  .hidden-box p{
    margin: 0;
    width: 245px;
    text-align: center;
    line-height: 140%;
    padding: 4px;
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 24.3px;
    color: rgb(255, 255, 255);
  }

  .card_icon{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

/****************************************************************************************************Teams Ends************************************************************************************************* */

/****************************************************************************************************Footer Start************************************************************************************************* */
.Footer{
    width: 1196px;
    display: flex;
    flex-direction: column;
    margin: auto;
    gap: 100px;
    padding: 150px 0 50px 0;
    overflow: hidden;
}

.testmonials-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}
.happy-customer{
    display: flex;
    align-items: center;
    justify-content: center;
    background: 
    linear-gradient(#000000, #000000) padding-box,
    linear-gradient(180deg, #565ABA, #C200C6) border-box;
    height: 42px;
    color: white;
    padding: 24px 32px;
    border: 2px solid transparent;
    border-radius: 50px;
}
.happy-customer p{
    font-family: Poppins;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    color: white;
}

.mySwiper{
    width: 100%;
}
.swiper-slide{
    color: white;
    width: 386px;
    height: 236px !important;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #ffffff1e;
    background-color: #ffffff1a;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-profile{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: space-between; */
    gap: 24px;
}
.card-profile-pic{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}
.card-profile-pic img{
    width: 100%;
    height: 100%;
}
.card-profile-name{
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 8px;
    justify-content: space-between;
}
.card-name{
    font-family: Inter;
    font-size: 18px;
    font-weight: 500;
    line-height: 24.3px;
    text-align: left;
    color: white;
}
.card-position{
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.6px;
    text-align: left;
    color: rgba(255, 255, 255, 0.455);
}
.card-des{
    display: flex;
    align-items: center;
    justify-content: left;
    margin-top: 28px;
}
.card-des p{
    font-family: Inter;
    font-size: 18px;
    font-weight: 400;
    line-height: 24.3px;
    text-align: left;
    color: rgba(255, 255, 255, 0.455);
}

.footer-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-bottom: 40px;
}
.footer-top{
    width: 100%;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
}
.footer-top-left{
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.footer-top-left a{
    width: 48px;
    height: 50px;
}
.footer-top-left a img{
    width: 100%;
    height: 100%;
}
.technolkar-name{
    font-family: Inter;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: white;
}
.footer-top-right{
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: 150px;
}
.footer-address{
    width: 230px;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 24px;
}
.footer-address h1,
.footer-social{
    font-family: Inter;
    font-size: 18px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    color: white;
}
.footer-address p{
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 21.6px;
    text-align: left;
    color: rgba(255, 255, 255, 0.718);
}
.footer-socials{
    width: 110px;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 24px;
}
.footer-social-links{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.social-media{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 9px;
}
.social-media img{
    width: 24px;
    height: 24px;
}
.twitter,
.facebook,
.instagram,
.linkedin{
    font-family: Inter;
    font-size: 16px;
    font-weight: 500;
    line-height: 21.6px;
    text-align: left;
    color: white;
}
.twitter a,
.social-a{
    text-decoration: none;
    color: white;
}
.footer-bottom{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.397);
    padding: 16px 0;
}
.developed-by{
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.6px;
    text-align: left;
    color: rgba(255, 255, 255, 0.397);
}
.techwara-link{
    text-decoration: none;
    background: linear-gradient(180deg, #565ABA 45%, #C200C6 96%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.copyright-details{
    display: flex;
    align-items: center;
    gap: 8px;
}
.copyright-details img{
    color: rgba(45, 28, 28, 0.384);
}
.copyright-des{
    font-family: Inter;
    font-size: 16px;
    font-weight: 400;
    line-height: 21.6px;
    text-align: left;
    color: rgba(255, 255, 255, 0.692);
}

/* ********************************************************************************************Footer Ends ******************************************************************************************************* */


/* ********************************************************************************************Media Queries Starts ******************************************************************************************************* */

@media (min-width: 992px) and (max-width: 1200px) {
    .main-container{

        /* Multiple background sizes */
            background-size: 
                450px 450px,
                450px 450px,
                1200px 1200px,
                1200px 1200px,
                1200px 1200px,
                1200px 1200px,
                600px 600px,
                600px 600px,
                600px 600px,
                1500px 1100px,
                1500px 1100px,
                1200px 1000px,
                1200px 1000px,
                0px 0px,
                000px 000px,
                000px 000px,
                0px 0px;
        
        
            /* Multiple background repeats */
            background-repeat: 
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat;
        
            /* Multiple background positions */
            background-position: 
                calc(50% - 450px) 200px,     
                calc(50% + 450px) 116.66px,
                center 250px,
                center 800px,
                center 2100px,
                center 2700px,
                calc(50% - 300px) 3800px,
                calc(50% + 300px) 3800px,
                calc(50%) 3800px,
                calc(50%) 4200px,
                calc(50%) 4600px,
                calc(50% - 200px) 5400px,
                calc(50% + 250px) 5400px,
                calc(50%) 6300px,
                calc(50% - 250px) 6550px,
                calc(50% + 250px) 6550px,
                calc(50%) 6800px;
        
        }
    
        /* ********************************************************************************************Header starts************************************************************************************************** */
      
        .technolkar-header{
            width: 932px;
        }
    
        /* ********************************************************************************************Header Ends**************************************************************************************************** */
    
        /* ********************************************************************************************Home starts************************************************************************************************** */
    
        .Home{
            width: 932px;
        }
        .Products,
        .Services,
        .Youtube,
        .Teams,
        .Footer{
            width: 932px;
            padding: 120px 0 0 0 ;
        }
    
        .home-container{
            width: 100%;
            gap: 60px;
            padding: 80px 0 0 0;
            margin-top: 50px;
        }
    
        .main-heading h1{ 
            font-size: 56px;
            font-weight: 600;
            width: 70%;
        }
        .community-button button{
            width: 270px;
            height: 50px;
            font-size: 18px;
        }
        .student-tabs{
            width: 80%;
        }
        .video-container{
            border-radius: 24px;
            padding: 20px;
        }
    
        /* ********************************************************************************************Home Ends**************************************************************************************************** */
    
        /* ********************************************************************************************Product starts*********************************************************************************************** */
        .Products{
            gap: 80px;
        }
        .heading{
            gap: 0px;
        }
        .heading h1{
            font-size: 40px;
        }
        .product-card1,
        .product-card2,
        .product-card3{
            border-radius: 24px;
            height: 300px;
            padding: 16px;
        }
        .product-image img{
            width: 100%;
            height: 100%;
            object-fit:cover;
        }
        .product-des1,
        .product-des2,
        .product-des3{
            padding:  52px 42px;
            gap: 24px;
        }
        .product-des-detail h1{
            font-size: 24px;
        }
        .button-container a{
            width: 140px;
            height: 40px;
            font-size: 18px;
            padding: 8px 12px;
        }
        .button-div h1{
            font-size: 16px;
        }
    
    
       /* ********************************************************************************************Product Ends*********************************************************************************************** */
    
    
       /* ********************************************************************************************Service start********************************************************************************************** */
    
       .Services{
            gap: 80px;
       }
       .service-container{
            grid-template-columns: repeat(3, 1fr);
       }
       .service-name h1{
            font-size: 20px;
       }
    
       /* ********************************************************************************************Service Ends********************************************************************************************** */
    
       /* ********************************************************************************************Youtube start********************************************************************************************** */
    
       .youtbe-cont-heading h1{
        font-size: 24px;
       }
       .youtube-video-cont{
            gap: 22px;
            height: 250px;
            align-items: start;
       }
       .youtube-subcon1,
       .youtube-subcon2{
        gap: 20px;
       }
       .video1-name h1{
            font-size: 18px;
       }
       .youtube-video1-des{
            gap: 20px;
       }
       .yotube-video1 img{
            width: 100%;
            height: 250px;
            object-fit: cover;
       }
       .watch-button-co p{
            padding: 12px 16px;
       }
       .youtube-videos-cont{
            gap: 22px;
       }
       .videos-div-1-a{
            width: 49%;
       }
       .videos-div-1,
       .videos-1-des{
            width: 100%;
       }
       .video-name{
            display: flex;
            justify-content: end;
       }
       .video-name p{
            width: 94%;
            font-size: 16px;
       }
       .channel-logo-div{
            gap: 0px;
            justify-content: space-between;
       }
       .channel-logo img{   
            width: 40px;
       }
       .videos-1-views{
            padding-left: 56px;
       }
    
       /* ********************************************************************************************Youtube Ends********************************************************************************************** */
    
       /* ********************************************************************************************Teams start********************************************************************************************** */
    
       .Teams{
            gap: 80px;
       }
       .card_container{
            grid-template-columns: repeat(3, 1fr);
       }
       .card1,
       .card2,
       .card3,
       .card4,
       .card5,
       .card6{
            width: 100%;
            height: fit-content;
            gap: 24px;
       }
       .card1-container,
       .card2-container,
       .card3-container,
       .card4-container,
       .card5-container,
       .card6-container{
            width: 100%;
            gap: 0px;
            height: fit-content;
       }
       .card_image{
            width: 245px;
            height: 250px;
       }
       .card-des{
            margin-top: 10px
       }
       .card_bio h1{
            font-size: 22px;
       }
       .card_bio p{
            font-size: 16px;
       }
       .footer-top{
            flex-direction: column;
            gap: 40px;
       }
       .footer-top-left{
            justify-content: left;
       }
       .developed-by,
       .copyright-des{
            font-size: 14px;
       }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .main-container{

    /* Multiple background sizes */
        background-size: 
            450px 450px,
            450px 450px,
            1200px 1200px,
            1200px 1200px,
            1200px 1200px,
            1200px 1200px,
            600px 600px,
            600px 600px,
            0px 0px,
            1500px 1100px,
            1500px 1100px,
            1200px 1000px,
            1200px 1000px,
            0px 0px,
            000px 000px,
            000px 000px,
            0px 0px;
    
    
        /* Multiple background repeats */
        background-repeat: 
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat;
    
        /* Multiple background positions */
        background-position: 
            calc(50% - 300px) 200px,     
            calc(50% + 300px) 116.66px,
            center 200px,
            center 800px,
            center 2100px,
            center 2700px,
            calc(50% - 200px) 4100px,
            calc(50% + 200px) 4100px,
            calc(50% + 250px) 3900px,
            calc(50%) 4800px,
            calc(50%) 5300px,
            calc(50% - 200px) 6400px,
            calc(50% + 250px) 6300px,
            calc(50%) 6300px,
            calc(50% - 250px) 6550px,
            calc(50% + 250px) 6550px,
            calc(50%) 6800px;
    
    }

    /* ********************************************************************************************Header starts************************************************************************************************** */
  
    .technolkar-header{
        width: 728px;
    }
    .nav-bar-container ul li a{
        margin: 0;
        font-size: 18px;
    }

    /* ********************************************************************************************Header Ends**************************************************************************************************** */

    /* ********************************************************************************************Home starts************************************************************************************************** */

    .Home{
        width: 728px;
    }
    .Products,
    .Services,
    .Youtube,
    .Teams,
    .Footer{
        width: 728px;
        padding: 120px 0 0 0 ;
    }

    .home-container{
        width: 100%;
        gap: 60px;
        padding: 80px 0 0 0;
        margin-top: 50px;
    }

    .main-heading h1{ 
        font-size: 48px;
        font-weight: 600;
        width: 80%;
    }
    .community-button button{
        width: 270px;
        height: 50px;
        font-size: 18px;
    }
    .student-tabs{
        width: 100%;
    }
    .video-container{
        border-radius: 24px;
        padding: 20px;
    }

    /* ********************************************************************************************Home Ends**************************************************************************************************** */

    /* ********************************************************************************************Product starts*********************************************************************************************** */
    .Products{
        gap: 60px;
    }
    .heading{
        gap: 0px;
    }
    .heading h1{
        font-size: 36px;
    }
    .product-card1,
    .product-card2,
    .product-card3{
        border-radius: 24px;
        height: 300px;
        padding: 16px;
    }
    .product-image img{
        width: 100%;
        height: 100%;
        object-fit:cover;
    }
    .product-des1,
    .product-des2,
    .product-des3{
        padding:  52px 42px;
        gap: 24px;
    }
    .product-des-detail h1{
        font-size: 24px;
    }
    .button-container a{
        width: 140px;
        height: 40px;
        font-size: 18px;
        padding: 8px 12px;
    }
    .button-div h1{
        font-size: 16px;
    }


   /* ********************************************************************************************Product Ends*********************************************************************************************** */


   /* ********************************************************************************************Service start********************************************************************************************** */

   .Services{
        gap: 60px;
   }
   .service-container{
        grid-template-columns: repeat(2, 1fr);
   }
   .service-name h1{
        font-size: 20px;
   }

   /* ********************************************************************************************Service Ends********************************************************************************************** */

   /* ********************************************************************************************Youtube start********************************************************************************************** */

   .youtbe-cont-heading h1{
    font-size: 24px;
   }
   .youtube-video-cont{
        gap: 22px;
        height: 250px;
        align-items: start;
   }
   .youtube-subcon1,
   .youtube-subcon2{
    gap: 20px;
   }
   .video1-name h1{
        font-size: 18px;
   }
   .youtube-video1-des{
        gap: 20px;
   }
   .yotube-video1 img{
        width: 100%;
        height: 250px;
        object-fit: cover;
   }
   .watch-button-co p{
        padding: 12px 16px;
   }
   .hidden-you-card{
        display: none;
   }
   .youtube-videos-cont{
        gap: 22px;
   }
   .videos-div-1-a{
        width: 49%;
   }
   .videos-div-1,
   .videos-1-des{
        width: 100%;
   }
   .video-name{
        display: flex;
        justify-content: end;
   }
   .video-name p{
        width: 90%;
   }
   .channel-logo-div{
        gap: 0px;
        justify-content: space-between;
   }
   .channel-logo img{   
        width: 40px;
   }

   /* ********************************************************************************************Youtube Ends********************************************************************************************** */

   /* ********************************************************************************************Teams start********************************************************************************************** */

   .Teams{
        gap: 60px;
   }
   .card_container{
        grid-template-columns: repeat(2, 1fr);
   }
   .card1,
   .card2,
   .card3,
   .card4,
   .card5,
   .card6{
        width: 100%;
        height: 450px;
        gap: 24px;
   }
   .card1-container,
   .card2-container,
   .card3-container,
   .card4-container,
   .card5-container,
   .card6-container{
        width: 100%;
        gap: 0px;
        height: 450px;
   }
   .card_image{
        width: 300px;
        height: 320px;
   }
   .card-des{
        margin-top: 10px
   }
   .card_bio h1{
        font-size: 22px;
   }
   .card_bio p{
        font-size: 16px;
   }
   .footer-top{
        flex-direction: column;
        gap: 40px;
   }
   .footer-top-left{
        justify-content: left;
   }
   .developed-by,
   .copyright-des
   {
    font-size: 14px;
   }
}

@media (min-width: 600px) and (max-width: 767.98px) {
    .main-container{

        /* Multiple background sizes */
            background-size: 
                450px 450px,
                450px 450px,
                1200px 1200px,
                1200px 1200px,
                1200px 1200px,
                1200px 1200px,
                600px 600px,
                600px 600px,
                0px 0px,
                1500px 1100px,
                1500px 1100px,
                1200px 1000px,
                1200px 1000px,
                0px 0px,
                000px 000px,
                000px 000px,
                0px 0px;
        
        
            /* Multiple background repeats */
            background-repeat: 
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat,
                no-repeat;
        
            /* Multiple background positions */
            background-position: 
                calc(50% - 300px) 200px,     
                calc(50% + 300px) 116.66px,
                center 200px,
                center 800px,
                center 2100px,
                center 2700px,
                calc(50% - 150px) 4000px,
                calc(50% + 150px) 4000px,
                calc(50% + 250px) 3900px,
                calc(50%) 4800px,
                calc(50%) 5300px,
                calc(50% - 200px) 6400px,
                calc(50% + 250px) 6300px,
                calc(50%) 6300px,
                calc(50% - 250px) 6550px,
                calc(50% + 250px) 6550px,
                calc(50%) 6800px;
        
        }
    
        /* ********************************************************************************************Header starts************************************************************************************************** */
      
        .technolkar-header{
            width: 560px;
        }
        .nav-bar-container ul li a{
            margin: 0;
            font-size: 14px;
            margin: 0px;
        }
        .lets-connect button span{
            font-size: 14px;
        }
        .lets-connect button{
            padding: 4px 16px;
        }
    
        /* ********************************************************************************************Header Ends**************************************************************************************************** */
    
        /* ********************************************************************************************Home starts************************************************************************************************** */
    
        .Home{
            width: 560px;
        }
        .Products,
        .Services,
        .Youtube,
        .Teams,
        .Footer{
            width: 560px;
            padding: 120px 0 0 0 ;
        }
    
        .home-container{
            width: 100%;
            gap: 60px;
            padding: 80px 0 0 0;
            margin-top: 50px;
        }
    
        .main-heading h1{ 
            font-size: 40px;
            font-weight: 600;
            width: 80%;
        }
        .community-button button{
            width: 270px;
            height: 50px;
            font-size: 18px;
        }
        .student-block img{
            width: 120px;
            height: 40px;
        }
        .student-block{
            width: fit-content;
            gap: 20px;
        }
        .student-container{
            width: fit-content;
        }
        .student-container p{
            font-size: 16px;
        }
        .student-tabs{
            width: 100%;
        }
        .tab-number{
            font-size: 26px;
        }
        .tab-text{
            font-size: 14px;
            line-height: 20px;
        }
        .tab-1,
        .tab-2,
        .tab-3{
            width: 176px;
            padding: 0;
            align-items: center;
            justify-content: center;
        }
        .video-container{
            border-radius: 24px;
            padding: 20px;
        }
    
        /* ********************************************************************************************Home Ends**************************************************************************************************** */
    
        /* ********************************************************************************************Product starts*********************************************************************************************** */
        .Products{
            gap: 60px;
        }
        .heading{
            gap: 0px;
        }
        .heading h1{
            font-size: 36px;
        }
        .product-card1,
        .product-card2,
        .product-card3{
            flex-direction: column;
            border-radius: 16px;
            padding: 20px;
            gap: 16px;
        }
        .product-image{
            width: 100%;
            height: 250px;
        }
        .product-image img{
            border-radius: 8px;
            object-fit: cover;
        }
        .product-des1,
        .product-des2,
        .product-des3{
            width: 100%;
            background-size: 0px 0px;
            justify-content: center;
            align-items: center;
            padding: 0;
            gap: 16px;
        }
        .product-des-detail h1{
            font-size: 20px;
            text-align: center;
        }
        .product-des-detail p{
            display: none;
        }
        .button-container{
            width: 100%;
            justify-content: center;
        }
        .button-container a{
            /* width: 100%; */
            padding: 10px 24px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .button-div{
            gap: 0;
        }
        .button-div h1{
            font-size: 12px;
        }
        .button-div img{
            width: 20px;
            height: 20px;
            display: none;
        }
        
    
       /* ********************************************************************************************Product Ends*********************************************************************************************** */
    
    
       /* ********************************************************************************************Service start********************************************************************************************** */
    
       .Services{
            gap: 60px;
       }
       .service-container{
            grid-template-columns: repeat(2, 1fr);
       }
       .service-name h1{
            font-size: 20px;
       }
    
       /* ********************************************************************************************Service Ends********************************************************************************************** */
    
       /* ********************************************************************************************Youtube start********************************************************************************************** */
    
       .youtbe-cont-heading h1{
        font-size: 24px;
       }
       .youtube-video-cont{
            gap: 22px;
            height: 250px;
            align-items: start;
       }
       .youtube-subcon1,
       .youtube-subcon2{
        gap: 20px;
       }
       .video1-name h1{
            font-size: 18px;
       }
       .youtube-video1-des{
            gap: 20px;
       }
       .yotube-video1 img{
            width: 100%;
            height: 200px;
            object-fit: cover;
       }
       .watch-button-co p{
            padding: 12px 16px;
       }
       .hidden-you-card{
            display: none;
       }
       .youtube-videos-cont{
            gap: 22px;
       }
       .videos-div-1-a{
            width: 49%;
       }
       .videos-div-1,
       .videos-1-des{
            width: 100%;
       }
       .video-name{
            display: flex;
            justify-content: end;
       }
       .video-name p{
            width: 90%;
            font-size: 15px;
       }
       .videos-1-views {
            padding-left: 60px;
       }
       .videos-1-views p{
            font-size: 14px;
       }
       .channel-logo-div{
            gap: 0px;
            justify-content: space-between;
       }
       .channel-logo img{   
            width: 40px;
       }
    
       /* ********************************************************************************************Youtube Ends********************************************************************************************** */
    
       /* ********************************************************************************************Teams start********************************************************************************************** */
    
       .Teams{
            gap: 60px;
       }
       .card_container{
            grid-template-columns: repeat(2, 1fr);
       }
       .card1,
       .card2,
       .card3,
       .card4,
       .card5,
       .card6{
            width: 100%;
            height: fit-content;
            gap: 24px;
       }
       .card1-container,
       .card2-container,
       .card3-container,
       .card4-container,
       .card5-container,
       .card6-container{
            width: 100%;
            gap: 0px;
            height: fit-content;
       }
       .card_image{
            width: 216px;
            height: 220px;
       }
       .hidden-box p{
        font-size: 12px;
       }
       .card-des{
            margin-top: 10px
       }
       .card_bio h1{
            font-size: 22px;
       }
       .card_bio p{
            font-size: 16px;
       }
       .footer-top{
            flex-direction: column;
            gap: 40px;
       }
       .footer-top-left{
            justify-content: left;
       }
       .developed-by,
       .copyright-des
       {
        font-size: 14px;
       }
}

@media (min-width: 480px) and (max-width: 599.98px) {

    .main-container{
        background-size: 
            200px 200px,
            200px 200px,
            1200px 1200px,
            1200px 1200px,
            1200px 1200px,
            1200px 1200px,
            300px 300px,
            300px 300px,
            200px 00px,
            1500px 1100px,
            1500px 1100px,
            1200px 1000px,
            1200px 1000px,
            00px 00px,
            1200px 1000px,
            1200px 1000px,
            800px 800px;


        /* Multiple background repeats */
        background-repeat: 
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat;

        /* Multiple background positions */
        background-position: 
            calc(50% - 200px) 225px,         
            calc(50% + 200px) 150px,
            center 450px,
            center 1350px,
            center 2100px,
            center 3100px,
            calc(50% - 100px) 5200px,
            calc(50% + 100px) 5200px,
            calc(50% + 400px) 4600px,

            calc(50%) 5000px,
            calc(50%) 5800px,
            calc(50%) 6250px,
            calc(50%) 7050px,
            calc(50%) 8300px,
            calc(50%) 8250px,
            calc(50% + 250px) 8750px,
            calc(50% - 800px) 9000px;

    }
    
    /* ***********************************************************************************************Header Start********************************************************************************************** */
    .technolkar-header{
        width: 440px;
    }
    .Home{
        width: 440px;
    }
    .Products,
    .Services,
    .Youtube,
    .Teams,
    .Footer{
        width: 440px;
        padding: 100px 0 0 0 ;
    }

    .nav-bar-container,
    .header-button-a{
        display: none;
    }

    .nav-icon-div{
        display: flex;
        padding: 10px;
    }


    /* ***********************************************************************************************Header Ends********************************************************************************************** */

    /* ***********************************************************************************************Home Start********************************************************************************************** */

    .home-container{
        width: 100%;
        gap: 60px;
        padding: 80px 0 0 0;
        margin-top: 20px;
    }
    .main-heading{ 
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-heading h1{ 
        font-size: 28px;
        width: 85%;
        
    }
    .community-button button{
        width: 200px;
        height: 40px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .student-block{
        width: 236px;
        height: 40px;
        padding: 8px 10px;
    }
    .student-block img{
        width: 75px;
    }
    .student-container p{
        font-size: 12px
    }
    .tab-1,
    .tab-2,
    .tab-3{
        width: auto;
        height: auto;
        gap: 0;
        padding: 10px 22px;
        border-radius: 8px;
    }
    .tab-number{
        font-size: 14px;
    }
    .tab-text{
        font-size: 10px;
        line-height: 14px;
    }

    .student-tabs{
        width: 100%;
    }
    .video-container{
        border-radius: 8px;
        padding: 10px;
    }
    .video-container iframe{
        border-radius: 4px;
    }


    /* ***********************************************************************************************Home Ends********************************************************************************************** */

    /* **********************************************************************************************Product Start******************************************************************************************* */

    .heading{
        gap: 0px;
    }
    .heading h1{
        font-size: 24px;
    }
    .line{
        width: 100px;
        height: 5px;
    }
    .Products{
        gap: 40px;
    }
    .product-card1,
    .product-card2,
    .product-card3{
        flex-direction: column;
        border-radius: 16px;
        padding: 20px;
        gap: 16px;
    }
    .product-image{
        width: 100%;
        height: 250px;
    }
    .product-image img{
        border-radius: 8px;
        object-fit: cover;
    }
    .product-des1,
    .product-des2,
    .product-des3{
        width: 100%;
        background-size: 0px 0px;
        justify-content: center;
        align-items: center;
        padding: 0;
        gap: 16px;
    }
    .product-des-detail h1{
        font-size: 20px;
        text-align: center;
    }
    .product-des-detail p{
        display: none;
    }
    .button-container{
        width: 100%;
        justify-content: center;
    }
    .button-container a{
        /* width: 100%; */
        padding: 10px 24px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .button-div{
        gap: 0;
    }
    .button-div h1{
        font-size: 12px;
    }
    .button-div img{
        width: 20px;
        height: 20px;
        display: none;
    }


    /* **********************************************************************************************Product Ends******************************************************************************************* */

    /* **********************************************************************************************Service Start******************************************************************************************* */

    .Services{
        gap: 40px;
    }
    .service-container{
        grid-template-columns: repeat(1, 1fr);
    }


    /* **********************************************************************************************Service Ends******************************************************************************************* */

    /* **********************************************************************************************Youtube Start******************************************************************************************* */

    .Youtube{
        gap: 40px;
    }
    .youtube-container{
        gap: 24px;
    }
    .youtbe-cont-heading h1{
        font-size: 16px;
    }
    .youtube-video-cont{
        gap: 16px;
    }
    .video1-name h1{
        font-size: 12px;
        line-height: 16px;
    }
    .video1-channel p{
        font-size: 10px;
        line-height: 16px;
    }
    .watch-button-co{
        width: 80px;
        height: 22px;
    }
    .watch-button-co p{
        font-size: 10px;
        padding: 6px 12px;
        height: 26px;
        font-weight: 500px;
    }
    .video1-name-cont{
        gap: 8px;
    }
    .video1-channel{
        gap: 0px;
    }
    .youtube-video1-des{
        gap: 20px;
    }
    .yotube-video1{
        height: 100%;
    }
    .yotube-video1 img{
        width: 100%;
        height: 132px;
        object-fit: cover;
    }
    .youtube-subcon1,
    .youtube-subcon2{
        gap: 8px;
    }
    .youtube-videos-cont{
        gap: 16px;
    }
    .videos-div-1-a{
        width: 48%;
    }
    .videos-div-1{
        width: 100%;
        border-radius: 16px;
        
    }
    .videos-div-1 img{
        border-radius: 16px;
    }
    .channel-logo-div{
        width: 100%;
    }
    .channel-logo{
        display: none;
    }
    .videos-1-views{
        display: none;
    }
    .video-name p{
        width: 100%;
        font-size: 12px;
        line-height: 16px
    }
    .hidden-you-card{
        display: none;
    }
    .youtube-subcon3 p{
        font-size: 12px;
    }
    .sub-button-co{
        width: 96px;
        height: 26px;
        padding: 6px 12px;
    }
    .sub-subscribe p{
        font-size: 10px;
    }
    .sub-img{
        width: 16px;
        height: 16px;
    }
    .sub-img img{
        width: 100%;
        height: 100%;
    }


    /* **********************************************************************************************Youtube Ends******************************************************************************************* */

    /* **********************************************************************************************Teams Start******************************************************************************************* */

    .Teams{
        gap: 40px;
    }
    .card_container{
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
    }
    .card1-container,
    .card2-container,
    .card3-container,
    .card4-container,
    .card5-container,
    .card6-container{
        width: 100%;
        height: fit-content;
    }
    .card_image{
        width: 100%;
        height: 320px;
    }
    .card_image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .card1,
    .card2,
    .card3,
    .card4,
    .card5,
    .card6{
        border-radius: 16px;
        gap: 16px;
    }


    /* **********************************************************************************************Teams Ends******************************************************************************************* */

    /* **********************************************************************************************Footer Start***************************************************************************************** */

    .Footer{
        gap: 40px;
    }
    .testmonials-container{
        gap: 40px;
    }
    .happy-customer{
        padding: 8px 24px;
    }
    .happy-customer p{
        font-size: 14px;
    }
    .card-des{
        margin-top: 10px;
    }
    .footer-top{
        flex-direction: column;
        gap: 40px;
    }
    .footer-top-left{
        justify-content: left;
    }
    .footer-top-right{
        flex-direction: column;
        gap: 36px;
    }
    .footer-bottom{
        flex-direction: column-reverse;
        gap: 8px;
    }
    .copyright-des{
        font-size: 12px;
    }
    .developed-by{
        font-size: 12px;
    }
}

@media (min-width: 360px) and (max-width: 479.98px) {
    
    .main-container{
        background-size: 
            200px 200px,
            200px 200px,
            1200px 1200px,
            1200px 1200px,
            1200px 1200px,
            1200px 1200px,
            300px 300px,
            300px 300px,
            200px 00px,
            1500px 1100px,
            1500px 1100px,
            1200px 1000px,
            1200px 1000px,
            00px 00px,
            1200px 1000px,
            1200px 1000px,
            800px 800px;


        /* Multiple background repeats */
        background-repeat: 
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat;

        /* Multiple background positions */
        background-position: 
            calc(50% - 150px) 225px,         
            calc(50% + 150px) 150px,
            center 450px,
            center 1350px,
            center 2100px,
            center 3100px,
            calc(50% - 100px) 4800px,
            calc(50% + 100px) 4800px,
            calc(50% + 400px) 4600px,

            calc(50%) 5000px,
            calc(50%) 5800px,
            calc(50%) 6250px,
            calc(50%) 7050px,
            calc(50%) 8300px,
            calc(50%) 8250px,
            calc(50% + 250px) 8550px,
            calc(50% - 800px) 8800px;

    }
    
    /* ***********************************************************************************************Header Start********************************************************************************************** */
    .technolkar-header{
        width: 340px;
    }
    .Home{
        width: 340px;
    }
    .Products,
    .Services,
    .Youtube,
    .Teams,
    .Footer{
        width: 340px;
        padding: 100px 0 0 0 ;
    }

    .nav-bar-container,
    .header-button-a{
        display: none;
    }

    .nav-icon-div{
        display: flex;
        padding: 10px;
    }
    .lets-connect button span{
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* ***********************************************************************************************Header Ends********************************************************************************************** */

    /* ***********************************************************************************************Home Start********************************************************************************************** */

    .home-container{
        width: 100%;
        gap: 60px;
        padding: 80px 0 0 0;
        margin-top: 20px;
    }
    .main-heading{ 
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .main-heading h1{ 
        font-size: 28px;
        width: 85%;
        
    }
    .community-button button{
        width: 200px;
        height: 40px;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .student-block{
        width: 236px;
        height: 40px;
        padding: 8px 10px;
    }
    .student-block img{
        width: 75px;
    }
    .student-container p{
        font-size: 12px
    }
    .tab-1,
    .tab-2,
    .tab-3{
        width: auto;
        height: auto;
        gap: 0;
        padding: 10px 22px;
        border-radius: 8px;
    }
    .tab-number{
        font-size: 14px;
    }
    .tab-text{
        font-size: 9px;
        line-height: 14px;
    }

    .student-tabs{
        width: 100%;
    }
    .video-container{
        border-radius: 8px;
        padding: 10px;
    }
    .video-container iframe{
        border-radius: 4px;
    }


    /* ***********************************************************************************************Home Ends********************************************************************************************** */

    /* **********************************************************************************************Product Start******************************************************************************************* */

    .heading{
        gap: 0px;
    }
    .heading h1{
        font-size: 24px;
    }
    .line{
        width: 100px;
        height: 5px;
    }
    .Products{
        gap: 40px;
    }
    .product-card1,
    .product-card2,
    .product-card3{
        flex-direction: column;
        border-radius: 16px;
        padding: 20px;
        gap: 16px;
    }
    .product-image{
        width: 100%;
        height: 250px;
    }
    .product-image img{
        border-radius: 8px;
        object-fit: cover;
    }
    .product-des1,
    .product-des2,
    .product-des3{
        width: 100%;
        background-size: 0px 0px;
        justify-content: center;
        align-items: center;
        padding: 0;
        gap: 16px;
    }
    .product-des-detail h1{
        font-size: 20px;
        text-align: center;
    }
    .product-des-detail p{
        display: none;
    }
    .button-container{
        width: 100%;
        justify-content: center;
    }
    .button-container a{
        /* width: 100%; */
        padding: 10px 24px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .button-div{
        gap: 0;
    }
    .button-div h1{
        font-size: 12px;
    }
    .button-div img{
        width: 20px;
        height: 20px;
        display: none;
    }


    /* **********************************************************************************************Product Ends******************************************************************************************* */

    /* **********************************************************************************************Service Start******************************************************************************************* */

    .Services{
        gap: 40px;
    }
    .service-container{
        grid-template-columns: repeat(1, 1fr);
    }


    /* **********************************************************************************************Service Ends******************************************************************************************* */

    /* **********************************************************************************************Youtube Start******************************************************************************************* */

    .Youtube{
        gap: 40px;
    }
    .youtube-container{
        gap: 24px;
    }
    .youtbe-cont-heading h1{
        font-size: 16px;
    }
    .youtube-video-cont{
        gap: 16px;
    }
    .video1-name h1{
        font-size: 12px;
        line-height: 16px;
    }
    .video1-channel p{
        font-size: 10px;
        line-height: 16px;
    }
    .watch-button-co{
        width: 80px;
        height: 22px;
    }
    .watch-button-co p{
        font-size: 10px;
        padding: 6px 12px;
        height: 26px;
        font-weight: 500px;
    }
    .video1-name-cont{
        gap: 8px;
    }
    .video1-channel{
        gap: 0px;
    }
    .youtube-video1-des{
        gap: 20px;
    }
    .yotube-video1{
        height: 100%;
    }
    .yotube-video1 img{
        width: 100%;
        height: 132px;
        object-fit: cover;
    }
    .youtube-subcon1,
    .youtube-subcon2{
        gap: 8px;
    }
    .youtube-videos-cont{
        gap: 16px;
    }
    .videos-div-1-a{
        width: 48%;
    }
    .videos-div-1{
        width: 100%;
        border-radius: 16px;
        
    }
    .videos-div-1 img{
        border-radius: 16px;
    }
    .channel-logo-div{
        width: 100%;
    }
    .channel-logo{
        display: none;
    }
    .videos-1-views{
        display: none;
    }
    .video-name p{
        width: 100%;
        font-size: 12px;
        line-height: 16px
    }
    .hidden-you-card{
        display: none;
    }
    .youtube-subcon3 p{
        font-size: 12px;
    }
    .sub-button-co{
        width: 96px;
        height: 26px;
        padding: 6px 12px;
    }
    .sub-subscribe p{
        font-size: 10px;
    }
    .sub-img{
        width: 16px;
        height: 16px;
    }
    .sub-img img{
        width: 100%;
        height: 100%;
    }


    /* **********************************************************************************************Youtube Ends******************************************************************************************* */

    /* **********************************************************************************************Teams Start******************************************************************************************* */

    .Teams{
        gap: 40px;
    }
    .card_container{
        gap: 20px;
        grid-template-columns: repeat(1, 1fr);
    }
    .card1-container,
    .card2-container,
    .card3-container,
    .card4-container,
    .card5-container,
    .card6-container{
        width: 100%;
        height: fit-content;
    }
    .card_image{
        width: 100%;
        height: 320px;
    }
    .card1{
        border-radius: 16px;
        gap: 16px;
    }


    /* **********************************************************************************************Teams Ends******************************************************************************************* */

    /* **********************************************************************************************Footer Start***************************************************************************************** */

    .Footer{
        gap: 40px;
    }
    .testmonials-container{
        gap: 40px;
    }
    .happy-customer{
        padding: 8px 24px;
    }
    .happy-customer p{
        font-size: 14px;
    }
    .card-des{
        margin-top: 10px;
    }
    .footer-top{
        flex-direction: column;
        gap: 40px;
    }
    .footer-top-left{
        justify-content: left;
    }
    .footer-top-right{
        flex-direction: column;
        gap: 36px;
    }
    .footer-bottom{
        flex-direction: column-reverse;
        gap: 8px;
    }
    .copyright-des{
        font-size: 12px;
    }
    .developed-by{
        font-size: 12px;
    }
}