*{
    margin:0;
    padding:0;
    font-family:Helvetica, Arial, sans-serif;
    color:#fff;
}

.bg{
    background-image: linear-gradient(#0028d5 50%, #fff);
    position: relative;
    z-index: 1;
}

/* navbar designing */

.logo{
    background-image: url("imgs/logo_dnt.svg");
    background-size: cover;
    width: 232px;
    height: 32px;
    cursor: pointer;
}

.navbar{
    margin: 0 128px;
    height: 42px;
    padding: 2rem 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0.25px solid rgba(255, 255, 255, 0.3);
}

.nav-ops{
    width: 320px;
    height: 22px;
    display: flex;
    justify-content: space-between;
    color: #f2f2f2;
}

.nav-ops a{
    text-decoration: none;
    font-size: 15px;
    font-weight: lighter;
    cursor: pointer;
}

.contact{
    width: 130px;
    height: 42px;
    font-size: 12px;
    font-weight: bold;
    background-color: #7cf1ff; 
    color: black;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}

.contact:hover{
    background-color: rgba(124, 241, 255, 0.9);
    transition: ease-in;
}

/* hero section */

.home{
    position:relative;
    height:1358px;
    overflow:hidden;
}

.hero-img{
    position:absolute;
    width:100%;
    height:120%;
    left:0;
    bottom: 2px;
    object-fit:cover;
    object-position:center;
    z-index:-2;
}

.hero-text{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 160px;
    background: transparent;
}

.hero-p1{
    font-size: 53px;
    font-weight: 200;
    line-height: 1.2;
}

.hero-p2{
    font-size: 63px;
    font-weight: 700;
    line-height: 1.05;
}

.book{
    width: 326px;
    height: 69px;
    font-size: 19px;
    font-weight: bold;
    background-color: #000; 
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 21px;
    display: block;
    margin: 20px auto 0 auto;
}

.book:hover{
    background-color: rgba(0, 0, 0, 0.8);
    color: rgba(255, 255, 255, 0.8);
    transition: ease-in;
}

/* the 2 boxes under center text */

.hero-box {
  display: flex;
  justify-content: center;
  align-items: center; 
  gap: 12px; 
  height: 30vh; 
  width: 100%;
  margin-top: 28.5rem;
}

.box1{
    width: 550px;
    height: 750px;
    padding: 16px;
    background-image: url("imgs/img_home_endToEnd.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
}

.box-text{
    width: 355px;
    height: 200px;
    padding-left: 30px;
    margin-top: 47px;
    font-size: 63px;
    font-weight: bold;
    background: linear-gradient(90deg, #0029d8 2%, #7cf1ff 90%);
    /* Clip the background to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: color 0.3s ease;
}

.box2{
    width: 550px;
    height: 780px;
    background-color: #f2f2f2;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
}

.slide1{
    width: 452px;
    height: 128px;
    padding: 16px;
    margin: 26px 31px 0 31px;
    background: linear-gradient(to right, #7cf1ff, #0029d8);
    display: flex;
    border-radius: 10px;
    cursor: pointer;
    color: #f2f2f2;
}

.slide-img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.title{
    margin-top: 15px;
    font-size: 17px;
    font-weight: bold;
}

.para1{
    font-size: 12px;
    font-weight: 500;
    line-height: 17px;
    text-align: left;
    height: 72px;
    padding-top: 5px;
}

.slide2{
    width: 425px;
    height: 0px;
    padding: 16px;
    background: linear-gradient(to right, #7cf1ff, #0029d8);
    opacity: 0.65;
    margin-left: 48px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.slide3{
    width: 390px;
    height: 0px;
    padding: 16px;
    background: linear-gradient(to right, #7cf1ff, #0029d8);
    opacity: 0.4;
    margin-left: 62px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.box2 h3{
    color: #0A0D14;
    font-size: 26px;
    margin: 30px 0 auto 30px;
}

.box2 ul{
    margin: 20px 0 auto 45px;
}

.box2 li{
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
}

.minus{
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #000; */
    margin-top: 40px;
}

.fa-minus{
    color: white;
    cursor: pointer;
}

.one{
    color: blue;
}

/* HERE STARTS THE PART BELOW THE 2 BOXES */

.heading{
    margin: 105px 129px 55px 129px;
    height: 150px;
    font-size: 60px;
    color: #0a0d14;
    font-weight: 700;
    line-height: 75px;
}

.logo-boxes{
    margin: 0 128px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
    cursor: pointer;
    margin-bottom: 115px;
}

.all{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f2937;
    border-radius: 8px;
}

/* LOGO BOX 1 */

.logobox1{
    width: 280px;
    height: 280px;
}

.logoimg1{
    width: 210px;
    height: 80px;
}

/* LOGO BOX 2 */

.logobox2{
    width: 280px;
    height: 280px;
}

.logoimg2{
    width: 200px;
    height: 35px;
}

/* LOGO BOX 3 */

.logobox3{
    width: 280px;
    height: 280px;
}

.logoimg3{
    width: 79px;
    height: 81px;
}

/* LOGO BOX 4 */

.logobox4{
    width: 280px;
    height: 280px;
}

.logoimg4{
    width: 138px;
    height: 50px;
}

/* LOGO BOX 5 */

.logobox5{
    width: 280px;
    height: 280px;
}

.logoimg5{
    width: 200px;
    height: 63px;
}

/* LOGO BOX 6 */

.logobox6{
    width: 280px;
    height: 280px;
}

.logoimg6{
    width: 91px;
    height: 89px;
}

/* LOGO BOX 7 */

.logobox7{
    width: 280px;
    height: 280px;
}


.logoimg7{
    width: 200px;
    height: 49px;
}

/* LOGO BOX 8 */

.logobox8{
    width: 280px;
    height: 280px;
}

.logoimg8{
    width: 69px;
    height: 70px;
}


/* HERE IS THE PHOTO BOXES PART OF WEBSITE */

.photo-boxes{
    margin: 0 128px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    column-gap: 8px;
}

/* HERE IS PHOTO BOX 1 DESIGNING */

.photo-box1{
    background-image: url("https://www.devntech.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimg_home_outsideBox%403x.b9bcb09c.png&w=3840&q=100");
    background-size: cover;
    width: 580px;
    height: 800px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.text-heading{
    width: 464px;
    height: 142px;
    margin: 50px 58px 0 58px ;
    color: white;
    font-size: 63px;
    font-weight: 700;
    line-height: 71px;
}

.text-para{
    width: 464px;
    height: 143px;
    margin: 28px 58px 0 58px ;
    color: white;
    font-size: 25.2px;
    font-weight: 300;
    line-height: 36px
}

/* HERE IS PHOTOBOX 2 DESIGNING */

.photo-box2{
    width: 556px;
    height: 768px;
    padding: 16px;
    border-radius: 8px;
    background-color: #f2f2f2;
    display: inline-block;          /* Places containers down-by-down */
    flex-wrap: nowrap;     /* Prevents containers from wrapping to a new line */
    overflow-x: hidden;       
    overflow-y: auto;      /* Enables verticle scrolling automatically */
}

/* PHOTO 1 DESIGNING IS HERE */

.photo1{
    width: 452px;
    height: 402px;
    padding: 24px;
    margin: 16px;
    background-image: url("imgs/plutotv.png");
    background-size: cover;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.photo-text1{
    width: 432px;
    height: 36px;
    padding-left: 20px;
    color: white;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.9;
}

.photo1 p{
    width: 432px;
    height: 21px;
    color: #fff;
    padding: 0 0 35px 20px ;
    font-size: 21px;
    font-weight: 300;
}



/* PHOTO 2 DESIGNING IS HERE */

.photo2{
    width: 452px;
    height: 402px;
    padding: 24px;
    margin: 16px;
    background-image: url("imgs/ctoconnection.png");
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.text-photo{
    position: absolute;
    bottom: 0;
}

.photo-text2{
    width: 432px;
    height: 36px;
    padding-left: 20px;
    color: white;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.9;
}

.photo2 p{
    width: 432px;
    height: 21px;
    color: #fff;
    padding: 0 0 35px 20px ;
    font-size: 21px;
    font-weight: 300;
}

/* PHOTO 3 DESIGNING IS HERE */

.photo3{
    width: 452px;
    height: 402px;
    padding: 24px;
    margin: 16px;
    background-image: url("imgs/paved.png");
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.photo-text3{
    width: 432px;
    height: 36px;
    padding-left: 20px;
    color: white;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.9;
}

.photo3 p{
    width: 432px;
    height: 21px;
    color: #fff;
    padding: 0 0 35px 20px ;
    font-size: 21px;
    font-weight: 300;
}

/*  here is the div with button lets connect */

.connect{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 7px;
    height: 156px;
    margin: 60px 128px;
    background-color: black;
}

.connect p{
    width: 558px;
    height: 32px;
    margin-left: 62px;
    font-size: 24px;
    font-weight: 400;
    color: white;
    text-align: left;
}

.connect span{
    font-weight: 600;
}

.connect-btn{
    width: 224px;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    background-color: #7cf1ff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    padding: 20px;
    margin-right: 32px;
}

.connect-btn:hover{
    background-color: rgba(124, 241, 255, 0.9);
    transition: ease-in;
}

.pic-slider{
    height: 892px;
    background-color: #0a0d14;
    border: none;
    border-radius: 8px;
    margin: 0 128px;
}

.pic-slider-heading{
    width: 1096px;
    height: 74px;
    padding: 50px 0 0 80px;
    font-size: 63px;
    font-weight: 700;
    background: linear-gradient(90deg, rgb(50, 71, 244) 2%, rgb(124, 241, 255) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: color 0.3s ease;
}

.pic-slider-text{
    width: 484px;
    height: 199px;
    padding: 20px 0 0 80px;
    font-size: 20px;
    font-weight: 100;
    line-height: 29px;
}

.pics{
    width: 1022px;
    height: 400px;
    padding: 50px 80px 99px 74px;
    display: flex;
    justify-content: space-between;
}

 .slider{
    display:flex;
    gap: 14px;
    width:100%;
    height: 384px;
}

.card{
    flex:.6;
    position:relative;
    overflow:hidden;
    border-radius:8px;
    transition:.6s ease;
    cursor:pointer;
}


.card:hover{
    flex:2.5;
}

.card img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:
        brightness(.55)
        contrast(.95)
        saturate(.8);

    transition:.5s;
}

.overlay{
    position:absolute;
    inset:0;
    padding:25px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 41, 113));
    color:#fff;
    opacity:0;
    transition:.4s;
}

.card:hover .overlay{
    opacity:1;
}

.card:hover img{
    filter:
        brightness(.9)
        contrast(1)
        saturate(1);
}

.upper p{
    font-size: 14px;
    padding-bottom: 12px;
}

.overlay .upper h3{
    font-size: 18px;
    font-weight: 600;
}

.overlay .p-two{
    font-size: 16px;
}

/* HERE IS THE IDEA BOXES */

.down-heading{
    width: 1176px;
    height: 95px;
    margin: 106px 128px 45px 128px;
    color: #0a0d14;
    font-size: 63px;
    font-weight: 700;
}

.idea-boxes{
    height: 507px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 80px;
    margin: 0 128px;
}

.idea-box{
    width: 362px;
    height: 507px;
    background-color: #f2f2f2;
    border-radius: 8px;
    position: relative;
}

.bulb{
    width: 110px;
    height: 110px;
    position: absolute;
    top: 20px;
    right: 20px;
    background-image: url("imgs/bulb_tio.png");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: contain;
    opacity: 0;
}

.text-idea1{
    width: 286px;
    height: 507px;
    padding: 0 38px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.idea-heading{
    width: 200px;
    height: 107px;
    background-image: linear-gradient(to right, #3247f4, #7cf1ff);
    /* Clip the background to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: color 0.3s ease;
    font-size: 18.9px;
    font-weight: 700;
    line-height: 35.721px;

}

.idea-para{
    width: 286px;
    height: 192px;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin-top: 20px;
}

.idea-btn{
    width: 94px;
    height: 18px;
    padding: 8px 16px;
    margin: 29px 0 20px 0;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 18px;
    background-color: #7cf1ff;
    border-radius: 9999px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.text-idea1 .two{
    width: 200px;
    height: 143px;
}

.text-idea1 .three{
    width: 198px;
    height: 143px;
}

.idea-para2{
    width: 286px;
    height: 168px;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin-top: 20px;
}

.idea-para3{
    width: 286px;
    height: 216px;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    margin-top: 20px;
}

/* HOVERS FOR IDEA BOXES */

.idea-box:hover{
    background-color: #3247f4;
    transition: ease-in 0.4s;
}

.idea-box:hover .idea-btn{
    background-color: #fff;
}

.idea-box:hover .text-idea1 p{
    color: white;
}

.idea-box:hover .bulb{
    opacity: 1;
}

/* HERE IS THE FOOTER */

footer{
    width: 100%;
    height: 310px;
    background-color: black;
    color: #f2f2f2;
}

.div1{
    width: 1184px;
    height: 207px;
    padding: 68px 48px 0 48px;
    margin: 0 75.5px ;
}

.div2{
    width: 1184px;
    height: 137px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
} 

/* HERE ARE ALL THE PARTS OF DIV 2 */

.part1{
    width: 379px;
    height: 137px;
}

.part1 a{
    width: 379px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    cursor: pointer;
}

.part1 a img{
    width: 180px;
    height: 32px;
}

.part1 p{
    width: 379px;
    height: 85px;
    margin-top: 20px;
    font-size: 18.9px;
    font-weight: 400;
    line-height: 28.35px;
}

.part2{
    width: 459px;
    height: 80px;
}

.part2 .mail{
    width: 459px;
    height: 32px;
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
}

.part2 .mail .fa-envelope{
    width: 32px;
    height: 32px;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
}


.part2 .mail .info{
    width: 171px;
    height: 28px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    color: #d1d5db;
}

.part2 .address{
    width: 459px;
    height: 32px;
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    margin-top: 16px;
}

.part2 .address .fa-location-dot{
    width: 32px;
    height: 32px;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
}

.part2 .address .maps{
    width: 419px;
    height: 28px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    color: #d1d5db;
}

/* HERE ARE ALL THE PARTS OF DIV 3 */

.div3{
    width: 1184px;
    height: 45px;
    padding-top: 20px;
    margin-bottom: 67px;
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    justify-content: flex-end;
    align-items: center;
} 

.connect-footer{
    width: 240px;
    height: 45px;
    background-image: linear-gradient(90deg, #3247f4 0, #fff 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: color 0.3s ease;
    font-size: 30px;
    font-weight: 700;
    line-height: 45px;
}

.media-icons{
    width: 176px;
    height: 42px;
    display: flex;
}

.icon{
    width: 42px;
    height: 42px;
    cursor: pointer;
}

.space{
    margin-left: 25px;
}