/*1900px*/
@media (min-width: 1900px) {
	body{
		overflow-x: hidden;
    	overflow-y: scroll;
	}
	/* .navbar-fixed-top {
	    padding-top: 0px;
    	padding-left: 200px;
	    padding-right: 25%;
	} */
	input#srch-term[type=text] {
	    width: 100%;
	    padding: 12px 50px;
	}
	.iconlist ul li {
    	margin-right: 50px;
    }
    /* .navbar-collapse.col-sm-5.iconlist {
	    margin-top: 40px;
	} */
	.iconname {
	    font-size: 15px;
	}
	/* .navdiv ul.nav.navbar-nav.navul {
	    margin-left: 31.50%;
	    margin-right: 31.50%;
	} */
	.popular-categories {
	    padding: 100px 350px;
	}
	.services-list {
	    padding: 70px 100px;
	}
	.call-action-section .text-box {
	   margin-left: 10%;
	}
	.preapaidplans {
	    padding: 20px 350px;
	}
	

	.colwhychoose{
		padding: 0px
	}
	.whychooseimg{
		width: 100%;
	}
	section.popular-categories.promotion {
	    padding: 100px;
	}
	.container-fluid.m-5.preapaidplans.datasimdet {
	    padding: 20px 400px;
	}
	.imgconnectany{
		width:51%;
	}
	h2.h2sec {
    	font-size: 38px;
	}
	.everything {
   		padding: 100px 260px;
	}
	.guidepad {
	    padding: 30px;
	}
	.footer-bg {
	    padding: 50px 200px;
	}


	/*about us page*/
	.aboutbanner {
	    padding: 100px 300px;
	}
	.colaboutinfo{
		padding: 0px 50px;
	}
	.aboutceo {
		padding: 0px 250px;
	}
	.professionals {
		padding: 0px 200px;
	}

	/*contact us page*/

	.connectwith {
	    padding: 0px 300px;
	}
	.contact-us-carebtn {
	    padding-top: 80px!important;
	    padding-left: 35%!important;
	}
	.carediv{
		margin-right: -65px;
	}
	.contactform {
	    width: 34%;
	    margin: 40px 33%;
	}
	.promocon{
		padding: 0px 150px;
	}
	img.imgslide{
		height: 800px !important;
		object-fit: cover;
	}
}
/*large desktop / wide screens*/
@media (min-width: 1600px) and (max-width: 1899px) {
	img.imgslide{
		height: 750px !important;
		object-fit: cover;
	}
}
/*desktop*/
@media (min-width: 1026px) and (max-width: 1599px) {
	img.imgslide{
		height: 600px !important;
		object-fit: cover;
	}
}
/*tab*/
@media (min-width: 767px) and (max-width: 1025px) {
	/* Same ~2.4:1 aspect ratio fix as the phone-width rule below -
	   350px was noticeably off from the real ratio across this range,
	   causing a visible crop. */
	img.imgslide{
		height: 41.7vw !important;
		object-fit: cover;
	}
	/* These banner images (prepaid-all-plans.png etc) are ~3:1 wide
	   marketing graphics with a photo on the left and headline text on
	   the right - a fixed 240px height is much taller than 240/3=720px
	   worth of width at these viewports, so object-fit:cover zoomed in
	   and cropped the headline text off the right edge. Use a vw-based
	   height that tracks the real ~3:1 ratio so the full image stays
	   visible at every width in this range instead of being cropped. */
	.banner img{
		height: 32vw;
		object-fit: cover;
	}
	.carousel-inner .item::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background: rgba(0, 0, 0, .5);
	}
	.tcc_cta img {
		order: -1 !important;
	}
	.tcc_cta {
		gap: 20px;
		flex-direction: column;
	}
	.iconlist.desktop {
		display:none;
	}
	.colsearch.desktop{
		display:none;
	}
}
/*landscape not imp*/
@media (min-width: 421px) and (max-width: 766px) {
	
}
/*mobile vertical*/
@media (max-width: 420px) {
	
}

/*===========================================================================*/

							/*480px CSS*/

/*===========================================================================*/

@media (max-width: 480px) { /***Android Mobile Screen***/
	

#header.header-2 .cp_side-menu {

	display: none;

}
.iconlist.desktop {
	display:none;
}
.colsearch.desktop{
	display:none;
}
.cp_side-menu{

	display:none;

}

#header.header-2{

	background:#00103A;

	position:static;

}

#header.header-2 #nav li{

	display:block;

}

#wrapper .header-2.cp_sticky{

	position:static;

}

.banner-2 img{

	display:none;

}

.banner-2.banner-outer .caption{

	top:0;

}



.user-option-col {

	position: static;

	padding: 0 10px;

}

strong.logo {

	margin: 20px 0 0 0;

	width: 100%;

	text-align: center;

}

.dropdown-box .dropdown-menu {

	left: 0;

}

#nav li {

	float: none;

	display: block;

	padding: 0 0 25px 0;

}

.navigation-col .navbar-collapse {

	float: left;

	width: 100%;

}

#nav li ul li > ul, #nav li ul {

	position: static;

}

.banner-outer .caption .holder {

	width: 100%;

}

.banner-outer .caption .holder h1 {

	font-size: 24px;

	line-height: 30px;

}

.banner-outer .caption .holder form input[type="text"] {

	margin: 0 0 20px 0;

}

.browse-job-section .holder {

	width: 100%;

	margin: 20px 0;

	float: left;

}

.kenburnsy {

	height: 700px;

}

.banner-menu ul li a {

	font-size: 12px;

}

.popular-categories {

	padding: 30px 10px;

}

.theme-style-1 h2 {

	font-size: 15px !important;
}
/* .theme-style-1 h2 above matches every h2 sitewide and !important wins
   the cascade outright, so any page heading without its own ≤480px
   override (like .promo-heading h2, which only has 54px/42px rules with
   no media query at all) silently falls through to 15px - far too small
   for a page's main heading. Give it back a readable mobile size. */
.promo-heading h2 {
	font-size: 32px !important;
}

.sec7-spn {
	font-size: 30px;
}
.fa.fa-phone-mob{
	font-size: 14px;
}
.sec6 h2.h2-plan {
    font-size: 23px!important;
    
}
.cardbtn{
	padding-left: 25px;
}
.preapaidplans{
	padding: 20px;
}


.row.whychooserow {
    text-align: center;
}
.whychoosediv {
	width: 160px;
    height: 2px;
    color: #ffffff;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
    top: -29px;
    left: 113px;
    /* right: 14px; */
    position: relative;
    /* margin-bottom: 16px; */
}

.col-md-1.box-body.boxwhychose{
	margin-top: 20px;
    float: left;
}

.whychoose h2.sec-why-head {
    color: #ffffff;
    /* margin: -20px 0px 30px 90px; */
    font-size: 36px;
    font-weight: bold;
	line-height: 1.2em;
	margin-left: 4px;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
	margin-left: -99px;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
	margin-right: -88px;
}
p.text-center.sec5-desc {
    color: #00103A;
    font-size: 13px;
    font-weight: 500;
    line-height: 2em;
    margin-top: 10px;
}

.explore-style-mobile{
	padding: 6px 18px 6px 18px;
}

.explore_moblie_box{
	margin-top: 0px;
}

.sec7-box-bg {
    background-color: rgba(0, 16, 58, 0.06);
    /* margin-top: 37px; */
    border-radius: 15px;
    float:left;
}
.crd{
	padding: 0;
}
.everything .vertical-align{
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
}

p.footp_mobile {
	margin-left: -28px;
	
}

.blogs-list {
    padding: 0px 0px;
}

.servicelistbox-mobile{
	margin-top: -80px;
}

.serviceP p {
    font-size: 12px;
    color: #00103A;
    line-height: 1.85714285714286;
    letter-spacing: 0.5px;
}

.single-plan-details .plandetails p {
    font-size: 13px;
    margin-bottom: 1em;
    line-height: 1.85714285714286;
    color: #00103A;
}

h4.footer_mobile{
	margin-left: -33px;
}

.padd-tb {
	padding: 30px 0;
}
#content-area .box .thumb {
	margin: 0 0 20px 0;
}
.recent-row .col-md-3 {

	clear: both;
}
#content-area .box .text-col h4 {

	font-size: 15px;
}
#content-area .box .text-col a.text {
	padding: 0 0 10px 0;
}
#loadMore {
	margin-bottom: 20px;
}
.call-action-section .text-box h2 {
	font-size: 20px;
	line-height: 30px;
}
.call-action-section .text-box p {
	font-size: 15px;
}
.price-table .box, .client-logo-row .holder, #footer .box {
	width: 100%;
}
.theme-style-1 .price-table .box-colo-2 {
	transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	margin: 75px 0 30px 0;
}
.price-table {
	padding: 30px 0;
}

.testimonials-section .holder {
	padding: 0;
}
.testimonials-section .holder .thumb::before {
	display: none;
}

.testimonials-section .holder .thumb {
	margin: 0 0 30px 0;
}

.testimonials-section .owl-next, .testimonials-section .owl-prev {
	top: 100%;
}

.client-logo-row .holder {
	padding: 0 10px;
}

.client-logo-row ul {
	display: block;
	text-align: center;
}

.client-logo-row ul li {
	float: none;
	display: inline-block;
}

.post-box, .price-table .box, .client-logo-row .holder, #footer .box {
	margin: 0 0 20px 0;
}

#footer {
	padding: 30px 10px;
}

#footer form, #content-area .box .text-col {
	float: left;
	width: 100%;
}

.bottom-row strong.copyrights {
	text-align: center;
	margin-bottom: 20px;
	line-height: 22px;
}

.footer-social {
	float: left;
	width: 100%;
}
.app-md-6{
	margin-right: 0px;
}
.everything {
     padding: 0px 0px 0px 0px; 
}
.img-qrcode{
	height: 100px;
}
.footer-social ul {

	text-align: center;
	display: block;
}

.footer-social ul li {
	
	display: inline-block;
	float: none;
	padding: 0 5px;
}
.banner-2 {
	height: 500px;
}

.popular-job-caregries .holder{
	width:100%;
}

.process-section{
	padding:80px 0 20px 0;
}

.facts-box a.facts-btn{
	margin-bottom:30px;
}

.facts-box .col-md-3{
	overflow:hidden;
}

.process-section .col-md-4{
	margin-bottom:20px;
}

.header-4 #nav li{
	display:block;
}

.video-section .video-frame .modal-dialog{
	width:100%;
	padding:0 10px;
}

.video-section .video-frame{
	width:100%;
	background-size:100%;
	margin:0;
	height:270px;
}
.video-section .text-box{
	margin:250px 0 0 0;
}
.post-box blockquote{
	margin:0 0 20px 0;
}
.post-box blockquote:before{
	display:none;
}
.post-box a.btn-style-1{
	float:left;
	clear:both;
	margin:20px 0 0 0;
}
.post-box .thumb iframe{
	height:173px !important;
}
.pagination-box .pager li{
	margin:0 -2px;
}
.blog-medium .post-box .frame{
	margin:0;
	width:100%;
}
.blog-medium .post-box .text-box{
	padding:30px 16px 21px 16px;
	float:left;
}
.resumes-content .box .frame{
	margin:0 0 20px 0;
}
.resumes-content .box .text-box{
	float:left;
}
.btn-row a.resume, .btn-row a.contact{
	margin:0 10px 10px 0;
}
.resumes-section .col-md-3{
	clear:both;
}
.progress-box strong.title, .progress-box .progress{
	width:100%;
}
.progress-box strong.title{
	padding:0 0 20px 0;
}
.skills-box{
	margin-bottom:20px;
}
.tags a{
	display:block;
	float:none;
	margin:5px 0;
}

.candidates-search-bar form{
	width:100%;
}
.candidates-search-bar form input[type="text"]{
	margin:0 0 20px 0;
}
.check-filter ul{
	display:block;
	text-align:center;
}
.check-filter ul li{
	float:none;
	display:inline-block;
	padding:0 4px;
}
.check-filter ul li:first-child{

	padding:0 4px;
}

.alphabets{
	margin-bottom:30px;
}

.alphabets a:first-child{

	padding:0 0 10px 21px;

}

.alphabets a{
	padding:0 0 10px 21px;
}

.contact-section .map-box .map_canvas{
	
	height:300px;
}

.contact-form form{

	margin:0 0 20px 0;

}

.account-option .inner-box, .account-option .inner-box .text-box{

	width:100%;

}

.account-option .inner-box .text-box{

	margin-bottom:20px;

}

.resum-form input[type="submit"]{

	width:100%;

	padding:20px 0;

}

#content-area .box .text-col a.text{

	padding:0 10px 10px 0;

}

.job-detail .btn-freelance{

	margin:0 10px 10px 0;

}

.theme-style-1 a.btn-style-1{

	font-size:13px;

}

#content-area .box{

	margin-bottom:20px;

}

.accordion-style-1 .col-md-4{

	clear:both;

}

.cp_aaccordion-row{

	margin-bottom:10px;

	float:left;

	width:100%;

}

.signup-section .holder{

	width:100%;

}

.signup-section .holder em{

	padding:10px 0 0 0;

}

.testimonials .inner-col{

	width:100%;

}

.aboutbanner {
    padding: 15px;
}
.about .overviewcol {
    padding-right: 0;
}
.about .membersdetails{
	padding: 15px;
}
.about .memberimg1{
	height: 250px;
}
.about .aboutcol{
	padding-left: 15px;
	margin-top: -50px;
}
.about .aboutceocol{
	padding: 15px;
}
.about .ceosign{
	margin: 0;
	width: 50%;
}
.sec-padd{
	padding: 15px;
}
button.btn-danger.btn-round-lg.btn-lg.guidewidth{
	margin: 10px;
}

/**Home slider**/

/* All 4 homepage slider images are ~2.4:1 wide (1920x800). A fixed
   350px height at a 320-480px phone width gives a box aspect ratio
   around 1:1 - nowhere close to 2.4:1 - so object-fit:cover zoomed way
   in and cropped most of each photo. vw-based height tracks the real
   ratio so the full image shows, matching the .banner img fix above. */
img.imgslide{
	height: 41.7vw !important;
	object-fit: cover;
}
/* Same fixed-height-vs-fluid-width mismatch as the tablet rule above -
   180px is far taller than these ~3:1 banners need at 320-480px wide,
   so the headline text baked into the image (e.g. "PREPAID PLANS") gets
   cropped off the right edge. vw-based height keeps the real aspect
   ratio so nothing gets cropped. */
.banner img{
	height: 32vw;
	object-fit: cover;
}
.carousel-inner .item::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, .5);
}
.carousel-caption{
	/* Base rule (style.css) centers this box with top:50% +
	   transform:translateY(-50%), sized around a tall 540px desktop
	   banner. On the much shorter mobile banner that centers the text
	   over its own height and shifts it up by half of that height -
	   since the heading alone is taller than the whole mobile banner,
	   it pushed the text above the image entirely. Reset to a normal
	   top-aligned box instead. */
	top: 10px !important;
	transform: none !important;
	bottom: auto !important;
	left: 0 !important;
	right: 0;
	width: 100%;
	box-sizing: border-box;

}
.carousel-caption h3{
	margin-left: 15px;
}
.carousel-caption p{
	margin: 0 0 0 15px;
	list-style: 1.2;

}
.h3-home{
	font-size: clamp(18px, 6.5vw, 26px) !important;
	line-height: 1.15 !important;
	margin-left: 15px !important;
}
.carousel-caption .btn-detail{
	margin-left: 15px;
	border-radius: 5px;
    padding: 10px 40px;
}
.carousel-indicators{
	display: flex;
	/* style.css's desktop rule sets flex-direction:column (a vertical
	   list pinned to the right) - this block never overrode it, so on
	   mobile the indicators still stacked vertically instead of sitting
	   in a horizontal row along the bottom. */
	flex-direction: row !important;
    justify-content: center;
    align-content: flex-end !important;
    flex-wrap: wrap;
	position: absolute;
	top: auto;
	right: auto;
	left: 0 !important;
	bottom: 10px;
	width: 100%;
	/* Bootstrap 5's own .carousel-indicators rule sets margin-left:15%
	   AND margin-right:15% (room for indicators to not stretch edge to
	   edge at desktop widths) - this block already zeroed margin-right
	   but missed margin-left, so that 15% (48px at a 320px viewport)
	   survived and shifted the whole indicator bar right, pushing it
	   past the edge and causing horizontal scroll on the page. */
	margin-left: 0 !important;
	margin-right: 0 !important;
	transform: none;
}
/* style.css's global ".row{margin-right:0 !important}" only zeroes one
   side of Bootstrap's row gutter compensation (normally a matching
   negative margin-left AND margin-right), leaving every .row on the
   site asymmetric. That's invisible on rows with room to spare, but on
   the homepage's "Our Services" icon row it pushes each full-width
   mobile card a few px past the right edge, causing horizontal scroll.
   Scoped to this one row instead of the global .row rule - an earlier
   attempt at fixing this globally caused much bigger overflow elsewhere
   on the page, so this stays local. */
.services-icons-row {
	margin-left: 0 !important;
}
/* .services-list .serviceBox (style.css) gives every card a 15px margin
   on ALL sides, all widths - fine at desktop where each card is narrow
   relative to the page, but each card renders at ~full row width on
   mobile (no col-md-2/col-sm-6 breakpoint applies below 576px), so that
   left+right 15px margin (30px total) no longer fits inside the row's
   already-tight width and pushes the card past the viewport edge. Drop
   the horizontal margin at this width; the 15px top/bottom margin
   already provides spacing between the stacked cards. */
.services-icons-row .serviceBox {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.carousel-indicators-numbers li.active, .carousel-indicators-numbers li:hover{
	background-color: #00103A;
    border-radius: 100% !important;
}
.carousel-indicators li{
	width: 30px !important;
    height: 30px !important;
}
.carousel-indicators-numbers li{
	font-size: 12px;
	color: #fff;
}
/*Forget Pasword Mobile Screen**/
.iconlist {
    margin-top: -2px;
    
}
.list-inline {
    
    margin-left: -22px;
	margin-bottom: -3px;
   
}
.elementskit-btn {
    padding: 10px 16px 13px 19px; 
    font-size: 8px;
     
}

.popular-categories h2 {
    float: none!important;
    margin: 0;
    font-size: 19px!important;
    font-family: 'Montserrat',sans-serif!important;
    color: #00103A!important;
    line-height: 1.3em!important;
    font-weight: 556!important;
}
.popular-categories p {
    font: none!important;
    font-size: 15px;
    font-weight: 400;
    margin: 0px 0px 40px 0px;
    line-height: 2em!important;
}

.card {
    
    margin-bottom: 20px;
}
.adslbox{
	/* calc(100% - 15px) with no margin to go with it left an
	   un-centered 15px gap on the right side only, instead of the box
	   filling its column evenly like every other section's cards. */
	width: 100%;
}
.sidebar{
	width: 100%!important;
}
}





/*===========================================================================*/

							/*767px CSS*/

/*===========================================================================*/

@media (max-width: 767px) {

.tcc-faq-section {
    padding: 40px 20px !important;
}
.plan-list {
    padding-left: 15px;
    padding-right: 10px;
}
.wifi {
    width: 24px;
    font-size: 15px;
}
.price {
    width: 62px;
    font-size: 13px;
}
.plan-title {
    font-size: 12.5px;
}
.validity {
    min-width: 92px;
    padding: 5px 8px;
    font-size: 11.5px;
}

#header.header-2 .cp_side-menu {

	display: none;

}
.iconlist.desktop {
	display:none;
}
.colsearch.desktop{
	display:none;
}


.user-option-col {

	position: static;

	padding: 0 10px;

}

#header.header-2 #nav li{

	display:block;

}

#header.header-2 #nav{

	text-align:left;

	background:#333;

}

#wrapper .header-2.cp_sticky{
  
	position:static;

}

#header.header-2 #nav li ul li > ul{

	position:static;

}

.banner-2 img{

	display:none;

}

.popular-job-caregries .holder{

	width:100%;

}

.cp_side-menu{

	display:none;

}

.dropdown-box .dropdown-menu {

	left: 0;

}

#nav li {

	float: none;

	display: block;

	padding: 0 0 20px 0;

}

.navigation-col .navbar-collapse {

	float: left;

	width: 100%;

}

#nav li ul {

	position: static;

}

.banner-outer .caption .holder {

	width: 100%;

	float: left;

}

.banner-outer .caption .holder h1 {

	font-size: 35px;

	line-height: 40px;

}

.banner-outer .caption .holder form input[type="text"] {

	margin: 0 0 20px 0;

}

.kenburnsy {

	height: 700px;

}

.browse-job-section .holder {

	width: 100%;

}

.browse-job-section strong.title {

	float: left;

	font-size: 12px;

}

#loadMore {

	margin-bottom: 30px;

}

.call-action-section .text-box {

	max-width: 100%;

}

.price-table .box {

	width: 100%;

}

.theme-style-1 .price-table .box-colo-2 {

	margin: 80px 0 30px 0;

	transform: scale(1);

}

.testimonials-section .holder {

	padding: 0 0 0 80px;

}

.testimonials-section .owl-next, .testimonials-section .owl-prev {

	top: 100%;

}

.client-logo-row .holder {

	padding: 10px;

	width: 100%;

}

.post-box {

	margin-bottom: 30px;

}

.padd-tb {

	padding: 30px 0;

}

#footer .box {

	width: 100%;

	margin-bottom: 30px;

}

#footer form {

	float: left;

	width: 100%;

}

.bottom-row strong.copyrights {

	text-align: center;

	padding: 10px 0;

	float: none;

	display: block;

}

.footer-social {

	float: left;

	width: 100%;

}

.footer-social ul {

	display: block;

	text-align: center;

}

.footer-social ul li {

	float: none;

	display: inline-block;

}

.banner-2{

	height:625px;

}

.facts-box a.facts-btn{

	margin-bottom:30px;

}

.process-section{

	padding:70px 0 20px 0;

}

.process-section .col-md-4, .facts-box .col-md-3{

	overflow:hidden;

}

.process-section .col-md-4{

	margin-bottom:20px;

}

.header-4 #nav li{

	display:block;

}

.header-4 #nav{

	text-align:left;

}

.header-4 #nav li ul li > ul{

	position:static;

}

.header-4 strong.logo{

	margin:0 0 0 20px;

}

.video-section .video-frame{

	width:100%;

	background-size:100%;

	margin:0;

}

.video-section .text-box{

	margin:400px 0 0 0;

}

.video-section .video-frame .modal-dialog{

	width:100%;

	padding:0 20px;

}

.post-box .thumb iframe{

	height:353px !important;

}

.blog-medium .post-box .frame{

	margin:0;

	width:100%;

}

.blog-medium .post-box .text-box{

	padding:30px 16px 21px 16px;

	float:left;

}

.resumes-section .col-md-3{

	clear:both;

}

.tags a{

	float:none;

	display:block;

	margin:4px 0;

}

.btn-row a.login{

	margin:10px 0 0 0;

}

.progress-box strong.title{

	font-size:14px;

}

.skills-box{

	margin-bottom:20px;

}

.candidates-search-bar form{

	width:100%;

}

.candidates-search-bar form input[type="text"]{

	margin:0 0 20px 0;

}

.check-filter ul{

	display:block;

	text-align:center;

}

.check-filter ul li{

	float:none;

	display:inline-block;

	padding:0 4px;

}

.check-filter ul li:first-child{

	padding:0 4px;

}

.alphabets{

	margin-bottom:30px;

}

.alphabets a:first-child{

	padding:0 0 10px 21px;

}

.alphabets a{

	padding:0 0 10px 21px;

}

.contact-section .map-box .map_canvas{

	height:300px;

}

.contact-form form{

	margin:0 0 20px 0;

}

.account-option .inner-box, .account-option .inner-box .text-box{

	width:100%;

}

.account-option .inner-box .text-box{

	margin-bottom:20px;

}

.resum-form input[type="submit"]{

	width:100%;

	padding:20px 0;

}

.accordion-style-1 .col-md-4{

	clear:both;

}

.cp_aaccordion-row{

	margin-bottom:10px;

	float:left;

	width:100%;

}

.testimonials .inner-col{

	width:100%;

}

.companies-section ul li{

	width:193px;

}

}





/*===========================================================================*/

						/*768px And 992px CSS*/

/*===========================================================================*/

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

#nav li ul li > ul {

	left: inherit;

	right: 0;

}

.banner-outer .caption .holder {

	float: left;

	width: 100%;

}

.banner-menu ul li {

	padding: 0 14px;

}

.banner-menu ul li a {

	font-size: 14px;

}

.browse-job-section .holder {

	width: 100%;

}

.kenburnsy {

	height: 450px;

}

.browse-job-section strong.title {

	float: left;

}

.call-action-section .text-box {

	max-width: 100%;

}

.call-action-section .text-box h2 {

	font-size: 34px;

}

.price-table .box {

	width: 240px;

}

.price-table .box ul li {

	font-size: 13px;

}

.testimonials-section .holder {

	padding: 0 0 0 100px;

}

.client-logo-row .holder {

	padding: 10px;

	width: 100%;

}

.client-logo-row ul {

	display: block;

	text-align: center;

}

.client-logo-row ul li {

	display: inline-block;

	float: none;

}

.post-box .text-box h4 {

	font-size: 14px;

}

#footer .box {

	width: 100%;

	margin: 0 0 30px 0;

}

#footer form {

	width: 100%;

}

.bottom-row strong.copyrights {

	float: none;

	display: block;

	text-align: center;

	padding: 10px 0;

}

.footer-social {

	float: left;

	width: 100%;

}

.footer-social ul {

	display: block;

	text-align: center;

}

.footer-social ul li {

	float: none;

	display: inline-block;

	padding: 0 5px;

}

#footer {

	padding: 30px 10px;

}

.user-option-col{

	position:static;

	padding:0 10px;

}

#header.header-2{

	position:static;

	background:#00103A;

}

#header.header-2 strong.logo{

	margin:0;

}

#header.header-2 .navigation-col{

	float:left;

	width:100%;

}

.dropdown-box .dropdown-menu{

	left:0;

}

.banner-outer .caption .holder form input[type="text"]{

	margin:0 0 20px 0;

}

.banner-2 img{

	display:none;

}

.banner-2{

	height:500px;

}

.banner-2.banner-outer .caption{

	top:0;

}

.popular-job-caregries .holder{

	width:100%;

}

#header.header-2 .navigation-col .navbar-collapse{

	margin:0;

}

.process-section .col-md-4{

	overflow:hidden;

	margin:20px 0;

}

.banner-2.banner-3 .caption .holder form{

	padding:20px 0 0 0;

}

.facts-box .col-md-3.col-sm-6{

	margin-bottom:20px;

}

.header-4 .navigation-col{

	float:left;

}

.video-section .video-frame{

	width:100%;

	background-size:100%;

	height:250px;

}

.video-section .video-frame .modal-dialog{

	width:100%;

	padding:0 20px;

}

.post-box blockquote{

	margin:0 74px 28px 65px;

}

.post-box .thumb iframe{

	height:274px !important;

}

.blog-medium .post-box .frame{

	margin:0;

	width:100%;

}

.blog-medium .post-box .text-box{

	padding:30px 16px 21px 16px;

	float:left;

}

.resumes-content .box .text-box{

	float:left;

}

.resumes-content .box .frame{

	margin:0 0 20px 0;

}

.btn-row a.resume{

	margin:0 20px 20px 0;

}

.tags a{

	float:none;

	display:block;

	margin:4px 0;

}

.progress-box strong.title{

	font-size:14px;

}

.candidates-search-bar form{

	width:100%;

}

.candidates-search-bar form input[type="text"]{

	margin:0 0 20px 0;

}

.check-filter ul{

	display:block;

	text-align:center;

}

.check-filter ul li{

	float:none;

	display:inline-block;

	padding:0 4px;

}

.check-filter ul li:first-child{

	padding:0 4px;

}

.alphabets{

	margin-bottom:30px;

}

.alphabets a:first-child{

	padding:0 0 10px 21px;

}

.alphabets a{

	padding:0 0 10px 21px;

}

.address-box address strong, .address-box address a{

	font-size:14px;

}

.account-option .inner-box, .account-option .inner-box .text-box{

	width:100%;

}

#content-area .box .thumb{

	margin:0 0 10px 0;

}

.cp_aaccordion-row{

	margin-bottom:10px;

	float:left;

	width:100%;

}

.testimonials .inner-col{

	width:100%;

}


.aboutbanner {
    padding: 15px;
}
.col-sm-6.overviewcol,
.col-sm-6.overview_col_img,
.col-sm-6.memberdetimg,
.col-sm-6.membersdetails,
.col-sm-6.aboutcol,
.col-sm-6.aboutceocol {
    padding: 15px;
    width: 100%;
}
.memberimg1{
	height: auto;
}
.ceosign{
	margin: 0;
}
.col-sm-3.about_team.text-center {
    width: 50%;
}
.sec-padd{
	padding: 50px 0;
}
button.btn-danger.btn-round-lg.btn-lg.guidewidth{
	margin: 10px;
}
/* .col-sm-3.customer{
	padding: 0 !important;
} */

}







/*===========================================================================*/

							/*1200px CSS*/

/*===========================================================================*/

@media (min-width: 1200px) {

#nav li ul li > ul {

	right: inherit;

	left: 100%;

}

.banner-outer .caption .holder {

	width: 1200px;

}

.price-table .box {

	width: 370px;

}

.client-logo-row .holder {

	width: 1200px;

	padding: 20px 0 20px 30px;

}

.client-logo-row ul li {

	width: auto;

}

strong.logo {

	margin: 0 150px 0 0;

}

.cp_side-menu {

	margin: 12px 0 0 50px;

}

.sidebar .box .text-box a.btn-apply {

	font: 900 14px/14px 'Roboto', sans-serif;

}

#footer form {

	float: right;

}

#header.header-2 .cp_side-menu {

	margin: 12px 50px 0 50px;

}

strong.logo {

	margin:0 0 0 65px;

}

.user-option-col {

	position: absolute;

	padding:0;

}

.banner-2 {

	padding:0;

}

.popular-job-caregries .holder {

	width: 1200px;

}

#header.header-3 .navigation-col{

	width:auto;

	float:none;

}

.header-4 .navigation-col {

	float: none;

}

.dropdown-box .dropdown-menu {

	left: inherit;

}

.video-section .video-frame {

	background: url(../images/video-frame.png) no-repeat left top;

	width: 689px;

	height: 456px;

}

.video-section .video-frame .modal-dialog {

	width: 1000px;

	padding:0;

}

.btn-row a.login {

	margin: 0 20px 0 0;

}

.check-filter ul li {

	padding: 0 0 0 38px;

}

.candidates-search-bar form {

	width: 1200px;

}


.alphabets a {

	padding: 0 0 0 21px;

}

.alphabets a:first-child {

	padding: 0;

}

.address-box address strong {

	font: 500 18px/22px 'Roboto', sans-serif;

}

.address-box address a {

	font: 500 18px/18px 'Roboto', sans-serif;

}

}







/*===========================================================================*/

							/*1400px CSS*/

/*===========================================================================*/

@media (max-width: 1480px) {

.cp_side-menu {

	margin: 10px 0 0 10px;

}

strong.logo {

	margin: 0;

}

.bottom-row {

	margin: 30px 0 0 0;

}

.banner-2{

	padding:50px 0;

}


.navigation-col .navbar-collapse {float:left;}

#footer .text-box, #footer .box {width:15%; margin:0 20px 0 0}
#footer form {width:16%;}

}

   



@media (max-width: 1900px) {	

#footer .text-box, #footer .box {width:15%; margin:0 20px 0 0}

#footer form {width:16%;}

}
/*header*/
/*media query for header*/
@media only screen and (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }
}
@media (min-width: 412px) and (max-width: 915px){
  .tccclogo{
    width: 50%;
  }

   input#srch-term[type=text] {
    width: 100%;
    padding: 12px 36px;
    margin: 6px 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    border-bottom: 1px solid #cdc7c7;
  }
  .nav > li.headnav {
    position: relative;
    display: inline-block;
  }



  .navbar-static-top {
    top: 179px!important;
  }
 

  ul.nav.navbar-nav.navul li a{
    text-decoration: underline;
  }
 
}
@media (min-width: 320px) and (max-width: 480px){
  

  .imgconnectany{
	width: 87%;
}

.container {
    /* padding-right: 15px; */
    /* padding-left: 15px; */
    margin-right: auto;
    margin-left: auto;
}
span.careername {
    font-size: 22px;
}
.careerPara{
	margin-top: 9px !important;
}
.btn-career {
	margin-left: 29%;
}

}

  
  /* .colsearch{
    margin-left: -75px;
    margin-top: -15px;
  } */
   input#srch-term[type=text] {
    width: 100%;
    padding: 12px 36px;
    margin: 6px 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    border-bottom: 1px solid #cdc7c7;
  }
  .nav > li.headnav {
    position: relative;
    display: inline-block;
  }
  ul.nav.navbar-nav.navul {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

  /* ul.nav.navbar-nav {
    margin-left: -159px;
    margin-top: -15px;
    margin-bottom: 15px;
  } */
  /* .navbar-header{
	margin-top: -4px;
	float: left;
	margin-left: 3px;
}
  */
.navbar-static-top {
    top: 164px!important;
   /* margin-left: -142px;*/
    margin-top: -4px;
    margin-bottom: 15px;
  }
  .promocon {
    padding: 0px 0px; 
}
 
  /* .navbar {
    margin-bottom: 154px!important;
  }
  .navdiv ul.nav.navbar-nav.navul{
    margin-left: -8%;
    margin-right: 25%;
	margin-top: 27px;
  }  */
  ul.nav.navbar-nav.navul li a{
    text-decoration: none;
  }
/* .qty-ressm{
	margin-left: 15%;
    margin-top: -11%;
}
.col-sm-res{
	margin-left: 49%;
    margin-top: -12%;
} 
.favuorite-res{
	margin-top: -17%;
	margin-left: 60%;
}
.rating-container .caption {
	font-size: 37%;
} 
.search-txt {
    width: 257px!important;
    height: 59px !important;
} */
a.rqbtn{
	background-color: #00103A;
    border-color: #00103A;
    font-weight: 600;
    line-height: 3em;
    color: white;
    border-radius: 30px;
    padding: 12px 15px 21px 13px !important;
}

/*@media only screen and (max-width: 1224px) and (min-width: 768px){
	.navbar-fixed-top {
	    padding-top: 10px;
    	padding-left: 200px;
	    padding-right: 0px;
	}
}*/

/*header end*/
/*carousel*/
@media (min-width: 412px) and (max-width: 915px){
	ul.nav.navbar-nav.navul{
		gap: 1rem;
	}
	li.headnav a{
		gap: 10px;
	}
	.iconlist ul li {
		margin-right: 0;
	}
}
@media screen and (min-width: 768px){
  .carousel-caption {
    right: 0%!important; 
    left: 0%!important;
    padding-bottom: 30px;
  }
  
}
/*carousel end*/
/*services start*/
@media(min-width: 1025px){
    .services-list .row{
        display: flex;
        justify-content: center;
    }

}
@media(max-width: 772px){
	
    .bgimgservices .container {
        min-height: 0;
    }
    .bgimgservices .container .row .service-head .banner-title {
        font-size: 30px;
    }
	
	.iconlist ul li {
		margin-right: 0;
	}
	.col-sm-3.colsearch.desktop,
	.navbar-collapse.col-sm-5.iconlist.desktop{
		display: none;
	}
	ul.nav.navbar-nav.navul{
		flex-direction: column;
	}
	.iconlist ul li {
		margin-right: 0;
	}
	.tccclogo{
		width: 60%;
	  }
	ul.nav.navbar-nav.navul{
			gap: 1rem;
		}
		.navbar-header {
			display: flex;
			width: 100%;
		}
		.col-sm-3.colsearch {
			width: 100%;
		}
}
@media (min-width: 768px) and (max-width: 1024px){
	.serviceBox  {
	    /*width: 131px;*/
	}

	.serviceBox h3 {
	    /*margin: 25px 0px 15px 0px;
	    font-size: 16px;
	    font-weight: 500;
	    line-height: 0px;
	    color: #00103A;*/
	}
	/*.serviceBox {
	    height: 225px;
	    width: 130px;
	    margin: 10px!important;
	}*/
	
}
@media (min-width: 768px){
	.serviceBox.col-md-6 {
    	width: 46%;
	}

}
@media (min-width: 992px) and (max-width: 1024px){
	.serviceBox {
	    /*width: 16.66666667%;*/
	    /*height: 250px;*/
	}
}
/*services end*/
 

/*shop page start*/

@media(max-width: 420px){
   	nav.pagenavigation {
    	margin-left: 0%;
		display: flex;
		justify-content: center;
		width: 100%;
		padding: 20px 0;
	}
	.row.flex {
    	display: contents!important;
	}
	img.shopimg {
	    display: block;
	    position: relative;
	    width: 100%;
	    height: 150px;
	}
}

@media (min-width: 768px) and (max-width: 1280px){
  	.container {
     	width: 100%; 
	}
	img.shopimg {
	    display: block;   
	    position: relative;
	    width: 100%;
	    height: 150px;
	}
	nav.pagenavigation {
	    margin-left: 35%;
	}
}
@media (min-width: 1280px) and (max-width: 1400px){
  	.container {
     	width: 100%; 
	}
	img.shopimg {
	    display: block;
	    position: relative;
	    width: 100%;
	    height: 250px;
	}
	nav.pagenavigation {
	    margin-left: 35%;
	}
}
@media (min-width: 1920px) and (max-width: 2549px){
  	.container {
     	width: 1399px; 
	}	
}
/*shop page end*/
/*footer start*/
@media (min-width: 768px) and (max-width: 1224px){
	.foot_head{
		width: 33%
	}
	.col-sm-2.foot_head.lp {
	    margin-left: 40px;
	}
}
/*footer end*/
/*career page start*/
@media (min-width: 768px) and (max-width: 1224px){
	.col-md-12.colaboutinfo {
	    width: 100%;
	    margin: 50px 25px;
	}
}
@media (min-width: 992px){
	.col-md-12.colaboutinfo {
	    width: 50%;
	}
}
/*career page end*/
/*latest news start*/
@media (min-width: 768px) and (max-width: 1224px){
	.col-sm-12.blogLists {
	    margin: 8px;
	    width: 100%;
	}
}
/*latest news end*/
/*faq start */
@media (min-width: 768px) and (max-width: 1224px){
	a.rqbtn {
	    font-size: 30px;
	}
	.rqbtnmr {
	    margin: 50px 0px;
	    text-align: center;
	}
	/* Same leftover "push down for a fixed header" hack already found and
	   removed on .banner-outer (homepage hero) - the header is
	   position:sticky, not fixed, so it doesn't need this compensation.
	   position:relative;top:75px doesn't remove the element from flow, so
	   its original space stays reserved right under the nav while the box
	   itself visually shifts down 75px, leaving a blank gap between them.
	   #inner-banner is shared by 90+ pages (Shop, Contact, Careers,
	   Latest News, etc), so this one rule was creating that gap on all
	   of them at 768-1224px. */
	.relatedheading {
	    padding: 100px;
	}
}
@media(max-width: 420px){
	.relatedheading {
	    padding: 15px;
	}
	.rqbtnmr {
	    margin: 50px 0px;
	    text-align: center;
	}
}
@media (min-width: 1920px) and (max-width: 2549px){
	.rqbtnmr {
	    margin: 50px 0px;
	    text-align: center;
	}
	a.rqbtn {
	    font-size: 35px;
	}
}
/*faq end*/
/*home page start*/
@media(max-width: 420px){
	.tcc_cta img {
		order: -1 !important;
	}
	.tcc_cta{
		gap: 20px;
	}
	
	.card {
    	padding: 35px;
		display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	}

	.adslbox {
	    padding: 0px;
	    border-radius: 15px;
	    padding-bottom: 30px;
		margin-bottom: 20px;
	}
	.elementor-widget-container {
	    float: right;
	    margin-bottom: 30px;
	}
	.adsl1 {
	    margin-top: -225px;
	}
	.clearfix {
 	   padding-bottom: 45px;
	}
	.call-action-section .text-box {
	    float: none;
	}
	.ekit-btn-wraper {
	    text-align: center;
	}
	.col-sm-3.elementor-widget-container.simcard {
	    float: none;
	    margin: 20px 120px 0px;
	}
}
@media (min-width: 768px) and (max-width: 1224px){
	/* .popular-categories's 100px fixed padding (all sides) was eating
	   200px of a 768px-wide screen, squeezing the ADSL/Voice/Student
	   cards row down to ~560px before the 3-column split even ran. */
	.popular-categories {
		padding: 60px 20px;
	}
	/* .mobilerow-ultra20 forces flex-wrap:nowrap, which keeps these 3
	   cards side-by-side even though their column classes
	   (col-md-4 col-sm-12) were clearly written to stack them full-width
	   below desktop - restore that stacking here since 3-across at
	   tablet widths leaves each card far too narrow to hold its text. */
	.mobilerow-ultra20 {
		flex-wrap: wrap;
	}
	.mobilerow-ultra20 > .col-md-4 {
		width: 100%;
		margin-bottom: 30px;
	}
	.mobilerow-ultra20 > .col-md-4:last-child {
		margin-bottom: 0;
	}
	.h3 {
    	font-size: 30px!important;
    	line-height: 35px;
	}
	.carousel-caption p {
   		line-height: 1.3;
	}
	.carousel-caption p {
    	margin: 10px 40px -10px 50px;
	}
	.productcard{
		margin-top: 20px;
	}
	.col-md-2.t2 {
	    top: -55px;
	    
	}
	.col-md-5.t1 {
	    width: 45%;
	}
	.popular-categories p {
    	line-height: 1.7em!important;
	}
	.adslbox {
	    width: 71.7%;
	    margin-left: 90px;
	    margin-bottom: 30px;
	}
	h2.h2-plan {
	    line-height: 1.3em;
	}
	.plan-card {
	    margin-bottom: 30px;
	}
	.plan-card1 {
	    margin-bottom: 30px;
	}
	.whychoose {
	    margin-top: 50px;
	}
	.row.whychooserow {
	    text-align: center;
	    margin: 30px 0px;
	}

	.promo{
		width: 100%;
	}
	.iconlist.desktop {
		display:none;
	}
	.colsearch.desktop{
		display:none;
	}
	.col-sm-5 {
    	width: 42.666667%;
	}
}
/*home page end*/

/* ===================================
   WHY CHOOSE TCC MOBILE FIX
=================================== */

/* .whychoose-margin's rigid width:50% !important (style.css) leaves room
   for the .whychoose::after background photo occupying the right 38% of
   the section - fine at desktop widths, but at 768-991px it squeezes the
   2x2 icon grid (col-md-6 boxes) down to ~175px columns, causing headings
   like "Superior Network COVERAGE" to wrap one word per line. Free up
   that space the same way the sub-768px fix already does: drop the
   decorative photo and let the text column use nearly the full row. */
@media (min-width: 768px) and (max-width: 991px){
    .whychoose::after{
        display:none;
    }
    .whychoose{
        min-height:auto;
    }
    .whychoose-margin{
        width:92% !important;
        margin-left:4%;
    }
}

@media only screen and (max-width: 767px){

    /* Content stacks full-width on mobile; the right-side photo can't sit
       beside it any more, so drop it instead of floating over the text. */
    .whychoose::after{
        display:none;
    }

    .whychooserow{
        display:block !important;
    }

    .whychooserow > div{
        width:100% !important;
        max-width:100% !important;
        flex:none !important;
    }

    /* Base rule's margin-left:10% (style.css) is never reset here, and
       .whychooserow > div above already forces width:100% - stacking the
       two makes the block 10% wider than the viewport, clipping the
       paragraph text off the right edge instead of wrapping it. */
    .whychoose-margin{
        width:100% !important;
        margin-left:0 !important;
        padding:40px 20px !important;
    }

    .whychoose-heading{
        text-align:center;
        margin-bottom:30px !important;
    }

    .whychoose-heading h2,
    .sec-why-head{
        font-size:28px !important;
        line-height:1.2 !important;
        margin:0 !important;
    }

    /* custom.css's global rule (top:-40px) and this file's own ≤480px
       rule (top:-29px) both shift this divider bar up via
       position:relative, assuming the generous gap below the large
       desktop heading. The compact mobile heading above has far less
       space under it, so that same upward shift pulls the bar (and its
       dot decoration) back up into the heading text instead of sitting
       below it. Drop the offset and let it sit in normal flow, centered
       under the now-centered heading. */
    .whychoosediv{
        position:static !important;
        top:auto !important;
        left:auto !important;
        width:60px !important;
        margin:15px auto 0 !important;
    }

    /* Feature rows */
    .whychoose .row .col-lg-6,
    .whychoose .row .col-md-6,
    .whychoose .row .col-sm-6{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
        margin-bottom:25px;
        text-align:center;
    }

    /* Icons */
    .whychoose i,
    .whychoose svg{
        display:block;
        font-size:40px !important;
        margin:0 auto 15px;
    }

    /* Titles */
    .whychoose h3,
    .whychoose h4{
        font-size:24px !important;
        line-height:1.3 !important;
        margin-bottom:10px !important;
    }

    /* Paragraphs */
    .whychoose p{
        font-size:15px !important;
        line-height:1.6 !important;
    }

    /* Right image section */
    .whychoose-image,
    .whychoose-img,
    .whychoose-right{
        width:100% !important;
        max-width:100% !important;
    }

    .whychoose-right img,
    .whychoose-image img,
    .whychoose-img img{
        width:100% !important;
        height:auto !important;
        display:block;
    }
}

@media(max-width:767px){

    .popular-categories h2{
        font-size:32px;
    }

    .productcard{
        margin-bottom:20px;
    }

    .productcard img{
        height:180px;
    }

    .cardhead{
        min-height:auto;
        font-size:16px;
    }

    .btn-buynow{
        width:100%;
    }
}

/* ===========================================================================
   MOBILE RESPONSIVENESS PASS - 2026-10-02
   Site-wide pass fixing spacing/sizing issues on phones and small tablets,
   page by page. Desktop (anything above these breakpoints) is untouched -
   every rule below only applies at <=767px (or a narrower range noted per
   block) so it can never affect the existing desktop layout.
   =========================================================================== */

/* --- Service/Plan pages (services.php, prepaid-all-plans.php, student-
   plans.php, prepiad-adsl-*.php): the decorative icon image in the left
   card of each plan tab --- */
@media (max-width: 767px) {
    /* .left-plan-cards img has width:100% + height:100% so it stretches
       to match the tall right-hand plan-list column on desktop (looks
       intentional there). Once columns stack on mobile there's no tall
       sibling to match anymore, so height:100% resolves against the
       stacked layout unpredictably and the icon was rendering almost as
       tall as the viewport - nearly 60% of the screen on a real phone,
       pushing all the actual plan content far down the page. Give it a
       small, fixed decorative size instead, matching what a commented-out
       earlier rule already intended (max-width:120px). */
    .left-plan-cards img {
        width: auto !important;
        height: auto !important;
        max-width: 110px !important;
        max-height: 110px !important;
        margin: 0 auto 16px !important;
        object-fit: contain;
    }
    .left-plan-cards {
        padding: 20px 20px 24px !important;
    }
    .left-plan-cards h3 {
        font-size: 22px !important;
    }
}

/* --- FAQ page (faq.php): category cards + question/answer text were all
   sized for desktop, making the page extremely long and text oversized
   on a phone --- */
@media (max-width: 767px) {
    .faq-category-section {
        padding: 36px 0 !important;
    }
    /* Falls through to the sitewide ".theme-style-1 h2{font-size:15px}"
       trap (see the .promo-heading h2 fix elsewhere in this file) since
       this heading has no mobile override of its own - give it back a
       readable size instead of the global 15px default. */
    .faq-category-section .section-heading h2 {
        font-size: 26px !important;
        margin-top: 0 !important;
    }
    .faq-category-section .section-heading {
        margin-bottom: 26px !important;
    }
    .faq-category-card {
        padding: 20px 18px !important;
    }
    .faq-card-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 20px !important;
        line-height: 52px !important;
        margin-bottom: 12px !important;
    }
    .faq-category-card h3 {
        font-size: 18px !important;
        margin-bottom: 6px !important;
    }
    .faq-category-card p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
    /* Client asked for FAQ font sizes specifically - 20px questions and
       20px/30px-line-height answers were by far the largest body text on
       the whole site, making every FAQ entry take several lines more
       than it needed to. */
    .faq-title {
        padding: 10px 18px !important;
    }
    .faq-title h4 {
        font-size: 15px !important;
    }
    .faq-count {
        font-size: 15px !important;
    }
    .faq-content {
        padding: 8px 18px 14px !important;
    }
    .faq-content p,
    .faq-content li {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* --- About page (about-us.php): history/story paragraphs had
   line-height:2 (double the font-size) which reads as excessive gaps
   between wrapped lines, and the Mission/Vision/Values cards carried
   full desktop padding + font-sizes once stacked to full width --- */
@media (max-width: 767px) {
    .history-content h2 {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    .history-content p {
        line-height: 1.6 !important;
    }
    .history-image img {
        height: 200px !important;
    }
    .history-row,
    .history-row.reverse {
        margin-bottom: 30px !important;
    }
    .value-card {
        padding: 28px 20px !important;
    }
    .value-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 22px !important;
        margin: 0 auto 16px !important;
    }
    .value-card h3 {
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }
    .value-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
}

/* --- Contact page (contact-page.php): "Connect with us" heading,
   "Phone/Email/Store Locations" cards, and the Stores & Locations
   map+info pairs --- */
@media (max-width: 767px) {
    /* Falls through to the sitewide 15px h2 trap (no mobile override of
       its own) - at 15px "Connect with us" also wrapped to 2 lines. */
    .section-title h2 {
        font-size: 24px !important;
    }
    .section-title {
        margin-bottom: 30px !important;
        gap: 14px !important;
    }
    .section-title span {
        width: 40px !important;
    }
    .section-title h2:after {
        bottom: -16px !important;
    }

    /* Generic round icon used by both the Phone/Email/Store cards above
       and each store's info card below - 90px was roughly a quarter of
       the card's own width once stacked to full-width on a phone. */
    .contact-icon {
        width: 56px !important;
        height: 56px !important;
        margin: 0 auto 16px !important;
    }
    .contact-icon i {
        font-size: 22px !important;
    }

    .contact-card {
        padding: 26px 20px !important;
    }
    .contact-card h4 {
        font-size: 20px !important;
        margin-bottom: 8px !important;
    }
    .contact-card p {
        font-size: 14px !important;
        min-height: 0 !important;
        margin-bottom: 16px !important;
    }
    .contact-btn {
        padding: 10px 28px !important;
        font-size: 14px !important;
    }

    /* Stores & Locations: every map+card pair used the same ~30-50px
       gap both within a pair (map to its own card) and between two
       different locations, so scrolling past several of them gave no
       visual cue where one location ended and the next began - the
       client specifically flagged not being able to tell which map
       belongs to which address. Make the within-pair gap small and the
       between-pair gap clearly bigger instead of nearly the same. */
    .store-location-row {
        margin-bottom: 60px !important;
        padding-bottom: 36px !important;
        border-bottom: 1px dashed rgba(0, 16, 58, 0.12);
    }
    .store-location-row:last-child {
        border-bottom: none !important;
    }
    .store-map-wrap {
        margin-top: 14px !important;
    }
    .store-info-card {
        padding: 24px 20px !important;
    }
    .store-info-card h4 {
        font-size: 19px !important;
        margin-bottom: 6px !important;
    }
    .store-info-card p {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
}

/* --- Product detail pages (product-details.php): some product
   descriptions are rich-text spec tables saved with a hardcoded inline
   pixel width (e.g. width:605px) sized for a desktop column - on a
   phone that just clipped the right-hand column's text instead of
   wrapping or shrinking. !important is required to win over the
   inline style attribute itself. --- */
@media (max-width: 767px) {
    #description table,
    .product-tab table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }
    #description table td,
    .product-tab table td {
        width: auto !important;
        word-wrap: break-word;
        font-size: 13px;
    }
}

/* ===========================================================================
   MOBILE RESPONSIVENESS PASS 2 - 2026-10-02
   Follow-up pass addressing specific client feedback on the homepage,
   tested at 320px width. Desktop untouched - everything here is inside
   max-width:767px (or narrower, noted per block).
   =========================================================================== */

@media (max-width: 767px) {

    /* 1) Hero slider: active slide number was 24-34px (depending on
       breakpoint) inside a 30px box, crowding the heading text right
       above it. Shrink the numbers and the box, and give the caption
       text breathing room so it never crowds the indicator row. */
    .carousel-indicators-numbers li {
        width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        color: #fff !important;
    }
    .carousel-indicators-numbers li.active {
        width: 20px !important;
        height: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        background-color: #00103A !important;
        color: #fff !important;
    }
    .carousel-caption {
        padding-bottom: 28px !important;
    }

    /* 2) ".popular-categories p" (shared by Latest Trending Devices,
       Choose From The Best ADSL Plans, and Latest Promotions subtitles)
       had line-height:3em - literally 3x the font-size, massively
       inflating the gap between wrapped lines and adding a lot of
       unnecessary scroll under every section title that uses it. */
    .popular-categories p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 0 0 20px 0 !important;
    }
    .popular-categories h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    /* 3) "Our Services" - tighten the gap below the heading/divider, and
       drop the card shadow that looked heavy at this size. */
    .recent-row .clearfix {
        margin-bottom: 16px !important;
    }
    .services-list .serviceBox {
        box-shadow: none !important;
    }

    /* 4) ADSL "Voice / Super Data UNET / Student Plans" cards: the row
       inherited the same asymmetric negative-margin bug already fixed
       for .services-icons-row (style.css's global .row only zeroes
       margin-right, not margin-left), pushing every card closer to the
       left edge and leaving a visibly bigger gap on the right. Also
       tightening the description text line-height and the section's
       own vertical padding. */
    .mobilerow-ultra20 {
        margin-left: 0 !important;
    }
    .adslbox .subdiv p {
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
    }
    section.popular-categories .adslh {
        margin-bottom: 8px !important;
    }

    /* 5) "Most Popular Prepaid Plans": .plan-card/.plan-card1 use
       flex:1 + min-width:250px + a 20px gap (custom.css), which at a
       320-375px viewport wraps inconsistently - some cards sat flush
       left, one had extra width removed by its "bordered" class,
       producing a different left/right gap on every single card. Force
       all of them to the same plain full-width stacked block instead of
       trying to flex/wrap at this size. Also shrinking the section's
       own top/bottom padding, which was taller than every other
       section's. */
    .preapaidplans .row {
        gap: 16px !important;
    }
    .preapaidplans .plan-card,
    .preapaidplans .plan-card1 {
        flex: none !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .preapaidplans {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* 6) "Why Choose TCC" section had 80px top/bottom padding (style.css)
       plus an extra 50px top margin on top of that - far more than any
       other section on the page. */
    .whychoose {
        padding: 30px 0 !important;
        margin-top: 20px !important;
    }

    /* 7) "Latest Promotions" reused .popular-categories' desktop
       padding (100px top/bottom, 40px left/right) - on a 320px screen
       that's a quarter of the screen width gone to side padding alone. */
    .popular-categories.promotion {
        padding: 30px 15px !important;
    }

    /* 8) "Need Guidance?" buttons: show 2 per row instead of stacking
       1 per row full-width, with a smaller, more even gap between them
       (a fixed-width inline-block button layout can't do this cleanly,
       so switch the wrapping div to a simple 2-column flex grid). */
    .guiddiv {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 20px 16px !important;
    }
    .guidepad {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 calc(50% - 6px) !important;
    }
    .guidewidth {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        padding: 14px 10px !important;
        font-size: 13px !important;
    }

    /* 9) Footer: Menu, Quick Links and Get In Touch were each their own
       full-width stacked column (4 rows total below the TCC intro
       text). Rearrange into a 2-column grid instead - Menu keeps its
       own full column, Quick Links and Get In Touch share the column
       next to it - cutting the footer's height substantially. */
    .footer-bg1--redesign {
        display: grid !important;
        /* minmax(0, 1fr), not plain 1fr - a bare 1fr track has an
           implicit content-based minimum width, so the long
           "customerservice@tcc.to" email (one unbreakable word) was
           forcing its column wider than the viewport and overflowing
           the whole page horizontally. minmax(0, 1fr) removes that
           implicit minimum so the track respects the grid's own width
           and wraps/clips its content instead. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "tcc tcc"
            "menu quick"
            "menu touch" !important;
        column-gap: 20px !important;
    }
    .footer-bg1--redesign > .customer {
        grid-area: tcc;
    }
    .footer-bg1--redesign > .dc {
        grid-area: menu;
    }
    .footer-bg1--redesign > .lp {
        grid-area: quick;
    }
    .footer-bg1--redesign > .gt {
        grid-area: touch;
    }
    .footer-bg1--redesign > div {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        min-width: 0 !important;
    }
    .footer-bg1--redesign .footer-element1 {
        overflow-wrap: anywhere;
    }
    /* The Menu column itself now only has ~half the page width to work
       with, but its own 2 sub-columns of links (Home/Services/Shop/
       Promos next to Careers/About/Contact) were still sitting side by
       side - at this width that's barely 70px each, breaking words like
       "Services" and "Promos" across multiple lines. Stack them into
       one single list instead. */
    .footer-menu-cols {
        flex-direction: column !important;
        gap: 0 !important;
    }
}